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 相关文章推荐
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
jQuery实现滚动效果
Nov 17 jQuery
Vuejs 单文件组件实例详解
Feb 09 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
JavaScript实现轮播图效果
Oct 30 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/03/04 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
鼠标图片振动代码
2006/07/06 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
Python之Sklearn使用入门教程
2021/02/19 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
大学毕业生的自我鉴定
2013/11/30 职场文书
工作自我评价分享
2013/12/01 职场文书
学校卫生检查制度
2014/02/03 职场文书
小学班级口号
2014/06/09 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
车辆年审委托书范本
2014/09/18 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers