解决vue项目打包后提示图片文件路径错误的问题


Posted in Javascript onJuly 04, 2018

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

// emplate for index.html
 index: path.resolve(__dirname, '../dist/index.html'),
 // Paths
 assetsRoot: 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项目打包后提示图片文件路径错误的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
Javascript获取某个月的天数
May 30 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
详细分析vue响应式原理
Jun 22 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 #Javascript
Redux实现组合计数器的示例代码
Jul 04 #Javascript
用Node编写RESTful API接口的示例代码
Jul 04 #Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 #Javascript
JS实现点击按钮可实现编辑功能
Jul 03 #Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 #Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 #Javascript
You might like
php 面向对象的一个例子
2011/04/12 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
JS作用域深度解析
2016/12/29 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
js实现列表按字母排序
2020/08/11 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python检测lvs real server状态
2014/01/22 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
django删除表重建的实现方法
2019/08/28 Python
Python2与Python3的区别点整理
2019/12/12 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
外包公司软件测试工程师
2014/11/01 面试题
天网工程实施方案
2014/03/26 职场文书
股东合作协议书范本
2014/04/14 职场文书
优秀求职信
2014/05/29 职场文书
德育标兵事迹材料
2014/08/24 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
生日宴会家属答谢词
2015/09/29 职场文书