解决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无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
vue router demo详解
Oct 13 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 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&&mysql)三
2006/10/09 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
php无限级分类实现方法分析
2016/10/19 PHP
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
深入浅析python继承问题
2016/05/29 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
selenium自动化测试入门实战
2020/12/21 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
英语教师岗位职责
2014/03/16 职场文书
追悼会主持词
2014/03/20 职场文书
产品质量承诺范本
2014/03/31 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
2014年教研室工作总结
2014/12/06 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
Django中的JWT身份验证的实现
2021/05/07 Python
7个关于Python的经典基础案例
2021/11/07 Python