vue打包静态资源后显示空白及static文件路径报错的解决


Posted in Javascript onSeptember 02, 2020

今天使用vue打包(npm run build)遇到了几个坑,在这里分享给大家

打包之后打开dist的页面显示空白:

这个问题以前就处理过,是打包过程中出现错误频率较高的一种,可能有3处地方会出现这种情况

1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的。

build: {
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  productionSourceMap: true,
  devtool: '#source-map',
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  bundleAnalyzerReport: process.env.npm_config_report
 }

这里需要将 assetsPublicPath: '/'改为assetsPublicPath: './',

2.src里边router/index.js路由配置里边默认模式是mode:'hash'(页面会在路由上加#),有时候改成了history(纯净路由)模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。

export default new Router({
//mode: 'history',
mode:'hash',\\或者直接不写
 routes: [{}]
)}

3.也有可能是因为背景图片路径没有配置需要在build/utils.js添加配置publicPath: '../../'

if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    publicPath:'../../',
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }

打包后找不到响应路径:

这都是比较常见的几种解决方式,如果将静态资源的图片路径作为绑定数据以js引入,图片放入了static里面用来引入这个页面又该怎样处理呢,如果以绝对路径访问vue打包是不会处理这一类的,所以打包后它图片访问的路径不会更改,而打包后dist文件里就只有index.html和webpack不会处理的static文件夹(vue static/下的文件都不会被Webpack处理:它们使用相同的文件名,直接拷贝到最终的路径)

解决方式有两种,

1.如果要上线的话,需要将你的主域名加在static之前然后他会逐级去访问打包后的文件。

return {
 isShow:true,
 imgData:'',
 myUpPic:'/yourDN/static/img/logo.png'
}

2.由于vue将组件访问静态资源的路径配置好了,你可以直接/static来找到static下的文件,但是这里的问题就是你访问的时候它是逐级访问这些文件的,所以打包后他还是会找不到静态资源的文件,在这里你就需要将/static改成./static,这样的话他就会在打包后的文件夹下直接访问其之下的静态资源文件夹。

return {
 isShow:true,
 imgData:'',
  //myUpPic:'/static/img/logo.png' 
 myUpPic:'./static/img/logo.png'
}

以上就是个人处理vue打包bug的一些小经验,希望这些能够对大家有所帮助。

补充知识:vue打包后路径多了个/css/static

vue打包后路径多了个/css/static导致一些css属性效果不显示。

解决方法:

在build/utils.js文件中添加publicPath:'…/…/',重新打包即可。

if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: "vue-style-loader",
    publicPath: "../../"
   });
  } else {
   return ["vue-style-loader"].concat(loaders);
  }

以上这篇vue打包静态资源后显示空白及static文件路径报错的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery ui 1.7更新小结
Aug 15 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 #Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 #Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 #Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 #Javascript
JavaScript this关键字指向常用情况解析
Sep 02 #Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 #Javascript
JavaScript Array.flat()函数用法解析
Sep 02 #Javascript
You might like
php header示例代码(推荐)
2010/09/08 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
在pycharm中显示python画的图方法
2019/08/31 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
校园招聘策划书
2014/01/09 职场文书
社区七一党员活动方案
2014/01/25 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
有关爱国演讲稿
2014/05/07 职场文书
学校节能减排方案
2014/06/13 职场文书
授权委托书范文
2014/07/31 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
2015年教师节广播稿
2015/08/19 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python