解决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使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
table行随鼠标移动变色示例
May 07 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
vue实现自定义多选按钮
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
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
如何快速上手Vuex
2017/02/14 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
python中dir函数用法分析
2015/04/17 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
django初始化数据库的实例
2018/05/27 Python
Python中property函数用法实例分析
2018/06/04 Python
python实现黑客字幕雨效果
2018/06/21 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
《再见了,亲人》教学反思
2014/02/26 职场文书
品牌推广策划方案
2014/05/28 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
母亲节寄语大全
2015/02/27 职场文书
大学生支教感言
2015/08/01 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技