Vue项目build后静态资源文件路径或新建文件夹图片路径找不到的问题

问题描述：使用vue-cli脚手架工具生成的vue项目，使用npm run build后生成的文件直接双击打开白屏一片。

解决方案：

第一步：修改build文件夹下utils.js，在以下位置加入

  if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',//用于解决build后静态文件路径找不到的问题(新加的代码)publicPath: '../'})} else {return ['vue-style-loader'].concat(loaders)}
复制代码

第二步：修改config文件夹下的index.js文件，在以下位置进行修改，注意是build对象中：

  build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',//用于解决build后文件路径找不到的问题(修改为./)assetsPublicPath: './',复制代码

转载于:https://juejin.im/post/5bdab7cfe51d45330e5dd3ac

Vue项目build后静态资源文件路径或新建文件夹图片路径找不到的问题相关推荐

Vue项目中的静态资源引入
Vue项目中的静态资源引入 assets和static assets 静态资源访问static assets和static assets assets在src文件夹下面,src里面的文件是参与打包的, ...
vue项目配置public静态资源路径访问
1.简介一般的vue项目都有一个初始index.html,而其他js.css都是这个html引入的,默认情况下使用绝对路径引入,如/js/app.js 这样就有一个问题,静态资源经常要部署在不同的上 ...
vue修改打包后静态资源路径
使用vue-cli生成的项目,打包方式是直接执行package.json里配置的脚本 npm run build// 这步其实是去执行build下的build.js脚本文件 node build/bu ...
vue项目上线后服务器资源更新而浏览器有缓存不更新
原因浏览器的缓存机制(分为强缓存和协商缓存) 强缓存:即不向后端发送请求,直接从缓存中读取数据协商缓存:向后端发起请求,看服务器资源是否更新,如果没有更新就返回304,如果更新了就返回200 解决 ...
Vue项目打包后js文件压缩
前言这段时间因为免费试用了https://free.aliyun.com/一台阿里云的服务器,配置是 2核4G 2M, 因为带宽太低了,每次在第一次加载的时候太慢了,通过F12调试,发现主要是因为加 ...
关于vue项目打包后提示图片文件路径错误的解决方法
vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片 ...
[vue] 怎么解决vue打包后静态资源图片失效的问题？
[vue] 怎么解决vue打包后静态资源图片失效的问题? 上面蛮多回答感觉像开玩笑似的,静态资源图片失效分几种情况. 1.确定线上环境是否在根路径上,配置资源根目录,vue-cli2 和 vue-cl ...
打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 2018年05月23日 10:05:35 for_weber 阅读数:14179 Vue项目运行npm run buil ...
解决vue-cli 打包后静态资源路径不对的问题
解决vue-cli 打包后静态资源路径不对的问题参考文章: (1)解决vue-cli 打包后静态资源路径不对的问题 (2)https://www.cnblogs.com/sifo/p/1008399 ...

Vue项目build后静态资源文件路径或新建文件夹图片路径找不到的问题

Vue项目build后静态资源文件路径或新建文件夹图片路径找不到的问题相关推荐

最新文章

热门文章