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 相关文章推荐
javascript顺序加载图片的方法
Jul 18 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
Vue 请求传公共参数的操作
Jul 31 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实现的比较完善的购物车类
2014/12/02 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
vue自定义指令实现方法详解
2019/02/11 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python编程实现的图片识别功能示例
2017/08/03 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
django自带调试服务器的使用详解
2019/08/29 Python
使用python实现飞机大战游戏
2020/03/23 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
小区门卫岗位职责
2013/12/31 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
开工仪式主持词
2014/03/20 职场文书
对孩子的寄语
2014/04/09 职场文书
会计演讲稿范文
2014/05/23 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
综合测评个人总结
2015/03/03 职场文书
恰同学少年观后感
2015/06/08 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers