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 相关文章推荐
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
javascript异常处理实现原理详解
Feb 17 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
js+cavans实现图片滑块验证
Sep 29 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编程效率 引入缓存机制提升性能
2010/02/15 PHP
php Session存储到Redis的方法
2013/11/04 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
Python抓取京东图书评论数据
2014/08/31 Python
让Python代码更快运行的5种方法
2015/06/21 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
python中的协程深入理解
2019/06/10 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
python计算二维矩形IOU实例
2020/01/18 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
python接口自动化框架实战
2020/12/23 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
学校隐患排查制度
2015/08/05 职场文书
文明礼仪主题班会
2015/08/13 职场文书
班级管理经验交流材料
2015/11/02 职场文书
python manim实现排序算法动画示例
2022/08/14 Python