解决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 相关文章推荐
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
Node与Python 双向通信的实现代码
Jul 16 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的宝库目录--PEAR
2006/10/09 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php批量上传的实现代码
2013/06/09 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
YII框架关联查询操作示例
2019/04/29 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
python中的函数用法入门教程
2014/09/02 Python
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
python global和nonlocal用法解析
2020/02/03 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
中科软测试工程师面试题
2012/06/16 面试题
大学四年职业生涯规划书范文
2014/01/02 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
红色故事演讲稿
2014/05/22 职场文书
上海世博会口号
2014/06/19 职场文书
理财学专业自荐书
2014/06/28 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
外出培训学习心得体会
2016/01/18 职场文书
python urllib库的使用详解
2021/04/13 Python