vue打包静态资源后显示空白及static文件路径报错的解决
作者：谭少居然
这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家
打包之后打开dist的页面显示空白：
这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况
1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的，默认显示的路径不对，打开肯定是空白的。
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
这里需要将 assetsPublicPath: '/'改为assetsPublicPath: './',
2.src里边router/index.js路由配置里边默认模式是mode:'hash'（页面会在路由上加#），有时候改成了history（纯净路由）模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行 。
export default new Router({
//mode: 'history',
mode:'hash',\\或者直接不写
routes: [{}]
3.也有可能是因为背景图片路径没有配置需要在build/utils.js添加配置publicPath: '../../'
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath:'../../',
fallback: 'vue-style-loader'
} else {
return ['vue-style-loader'].concat(loaders)
打包后找不到响应路径：
这都是比较常见的几种解决方式，如果将静态资源的图片路径作为绑定数据以js引入，图片放入了static里面用来引入这个页面又该怎样处理呢,如果以绝对路径访问vue打包是不会处理这一类的，所以打包后它图片访问的路径不会更改，而打包后dist文件里就只有index.html和webpack不会处理的static文件夹（vue static/下的文件都不会被Webpack处理：它们使用相同的文件名，直接拷贝到最终的路径）
解决方式有两种，
1.如果要上线的话，需要将你的主域名加在static之前然后他会逐级去访问打包后的文件。
return {
isShow:true,
imgData:'',
myUpPic:'/yourDN/static/img/logo.png'
2.由于vue将组件访问静态资源的路径配置好了，你可以直接/static来找到static下的文件，但是这里的问题就是你访问的时候它是逐级访问这些文件的，所以打包后他还是会找不到静态资源的文件，在这里你就需要将/static改成./static，这样的话他就会在打包后的文件夹下直接访问其之下的静态资源文件夹。
return {
isShow:true,
imgData:'',
//myUpPic:'/static/img/logo.png'
myUpPic:'./static/img/logo.png'
以上就是个人处理vue打包bug的一些小经验，希望这些能够对大家有所帮助。
补充知识：
vue打包后路径多了个/css/static
vue打包后路径多了个/css/static导致一些css属性效果不显示。
解决方法：
在build/utils.js文件中添加publicPath:'…/…/',重新打包即可。
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: "vue-style-loader",
publicPath: "../../"
} else {
return ["vue-style-loader"].concat(loaders);
以上这篇vue打包静态资源后显示空白及static文件路径报错的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
vue+elemen实现el-tooltip在文本超出区域后浮现
2023-12-12
Vue3中嵌套路由和编程式路由的实现
2023-12-12
Vue开发中Jwt的使用详解
2023-12-12
vue使用element-plus依赖实现表格增加的示例代码
2023-12-12
Vue 3 + Element Pl
2023-12-12
在Vue3中使用vue-qrcode库实现二维码生成的方法
2023-12-12
打包组件报错:Error:Cannot find module &ap
2023-12-12
vue elementUI el-form 数
2023-12-12
美国设下计谋,用娘炮文化重塑日本,已影响至中国
2021-11-19
时空伴随者是什么意思?时空伴随者介绍
2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终
2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表
2021-10-26
电脑版
-
返回首页
2006-2024 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号
