解决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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
js调用网络摄像头的方法
Dec 05 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脚本的10个技巧(2)
2006/10/09 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
javascript 自定义事件初探
2009/08/21 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
Python中的rfind()方法使用详解
2015/05/19 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
Python实现包含min函数的栈
2016/04/29 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
英语专业个人求职信范文
2014/02/01 职场文书
捐款倡议书范文
2014/02/02 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
教师批评与自我批评
2014/10/15 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
Nginx进程调度问题详解
2021/09/25 Servers