关于vue项目打包后提示图片文件路径错误的解决方法

vue项目打包后在production模式下提示图片 ‘404（not found），在dev环境下好好的，打包了就提示这个错误。这是为什么呢，以前第一次使用vue-cli构建项目的的时候只有两个图片文件，当时部署后报错路径问题，当时的想法就是简单粗暴，直接在build好的文件修改了文件路径，再后来项目中遇到了一大堆静态资源，修改路径显然是不行的，看了一下生成文件大概知道是文件目录改变了，所以引用的路径也要随之改变，网上最简单的方法是修改 ‘config/index.js’文件中的 build模块：

// emplate for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './',

将默认的改为上文这样子，静态文件目录改为static，静态路径改为‘./’，即相对路径。 ok了？
试了一下还是有404，当时想到的就是难道只能在组件data中以“require”的方式一个一个的引入了吗？这个属于js中以模块引入方式确实可行，但是太繁琐，想一下，使用这张图的时候在html文档结构中以 “:bind”的方式将资源以code的方式加在html文档中，不是说这样不行，这样也是可以实现想要的效果的，但是这样做会导致不仅文档结构不清晰，冗余度高，维护起来麻烦，而且资源很多的时候这是一项庞大且繁琐的工作，徒增加无用功。

这样第三种方法应用而生，就是修改‘build’目录下的utils.js文件，将文件中的“generateLoaders”函数改为：

 pluginfunction generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS ?[cssLoader,     postcssLoader] : [cssLoader]if (loader) {loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})})}// Extract CSS when that option is specified// (which is the case during production build)if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath:'../../'                  //add})} else {return ['vue-style-loader'].concat(loaders)}}

重点是if…else判断中的那个”publicPath:’../../’ ”
build一下，部署在服务端，ok可行，这样就可以愉快的在style中使用图片资源了。

注：原创文章，随意使用，转载请注明出处

关于vue项目打包后提示图片文件路径错误的解决方法相关推荐

苹果cms防红跳转开启后提示模板文件不存在的解决方法
苹果cms开启防红跳转后,提示模板文件不存在(如下图)这是因为你使用的模板里面缺少苹果cms自带的防红跳转模板导致,遇到这种状况后需要把苹果cms默认自带的( template/default_pc/ ...
Vue项目build后静态资源文件路径或新建文件夹图片路径找不到的问题
问题描述:使用vue-cli脚手架工具生成的vue项目,使用npm run build后生成的文件直接双击打开白屏一片. 解决方案: 第一步:修改build文件夹下utils.js,在以下位置加入 i ...
Vue项目启动后Error: Cannot find module ‘xxx’的解决方法
文章目录 1. 删除 2. 安装依赖 3. 启动项目解决方法 1. 删除删除 node_modules 整个文件夹和 package-lock.json 文件(这个文件不一定有),注意不是 pac ...
打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 2018年05月23日 10:05:35 for_weber 阅读数:14179 Vue项目运行npm run buil ...
快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题为什么打包后文件过大? 如何快速解决一.路由懒加载[使用es6提案的import()方式] 二.CDN引入为什么打包后文件过大? 移动app项目,使用vue- ...
vue+webpack项目打包后背景图片加载不出来问题解决
vue+webpack项目打包后背景图片加载不出来问题解决参考文章: (1)vue+webpack项目打包后背景图片加载不出来问题解决 (2)https://www.cnblogs.com/mica ...
Vue项目打包后js文件压缩
前言这段时间因为免费试用了https://free.aliyun.com/一台阿里云的服务器,配置是 2核4G 2M, 因为带宽太低了,每次在第一次加载的时候太慢了,通过F12调试,发现主要是因为加 ...
php项目index页面空白,如何解决vue项目打包后打开页面空白的问题
这篇文章主要介绍了vue项目打包后打开空白解决办法,内容挺不错的,现在分享给大家,也给大家做个参考. 网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通 ...
(javascript)vue项目打包后，写的覆盖element的样式无效了。这是什么原因？
问题: (javascript)vue项目打包后,写的覆盖element的样式无效了.这是什么原因?描述: 在开发模式模式下,写的覆盖样式都有效,打包后就无效,请问下是什么原因? main.js里的c ...

关于vue项目打包后提示图片文件路径错误的解决方法

关于vue项目打包后提示图片文件路径错误的解决方法相关推荐

最新文章

热门文章