关于vue-cli3打包代码后白屏的解决方案


Posted in Javascript onSeptember 02, 2020

前言 :

最近使用了vue-cli3.0 开发了一个移动网页端项目,准备打包发布了。按照以往的流程 npm run build

问题来了

打开 dist index.html 文件发现白屏。打开调试后 发现文件引用路径不对

根据以往的经验 根目录下新建 vue.config.js

配置 publicPath

module.exports = {
  ...
  runtimeCompiler: true,
  publicPath: './'
  ...
}

满心欢喜的打开,结果还是白屏。打开调试发现文件路径是正确的,这就唧唧了!!。

发现问题

各种百度。发现了样的问题 一看vue-router的mode配置可能会影像打包后的链接地址,然后看看我自己的router:

var router = new Router({ 
mode: 'history' 
})

vue-router对mode的说明:

mode

类型: string

默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)

可选值: "hash" | "history" | "abstract"

配置路由模式:

hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。

history: 依赖 HTML5 History API 和服务器配置。

abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。

解决问题

终于弄明白了,如果使用history模式上线,必须要服务端在服务器上有对应的模式才能使用history(看上面链接),如果服务器上没有配置,可以先使用默认的hash;

补充知识:vue打包项目以后白屏和图片加载不出来问题解决方法

vue打包项目以后部署访问白屏。查看控制台是404.这是由于打包的时候没有设置对静态资源路径。原文件是绝对路径,需要改成相对路径。

1.白屏修改config/index.js

关于vue-cli3打包代码后白屏的解决方案

2.图片加载不出来,修改build/utils.js

关于vue-cli3打包代码后白屏的解决方案

以上这篇关于vue-cli3打包代码后白屏的解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
js运动动画的八个知识点
Mar 12 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
ES6对象操作实例详解
May 23 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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
通过实例解析JavaScript常用排序算法
Sep 02 #Javascript
You might like
JS实现php的伪分页
2008/05/25 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
PHP进程同步代码实例
2015/02/12 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
Python中用于计算对数的log()方法
2015/05/15 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
python的移位操作实现详解
2019/08/21 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
什么叫做SQL注入,如何防止
2016/10/04 面试题
中专自我鉴定范文
2013/10/16 职场文书
餐饮管理自我介绍信
2014/01/15 职场文书
先进工作者获奖感言
2014/02/08 职场文书
超市促销活动总结
2014/07/01 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
如何写辞职信
2015/05/13 职场文书
JS setTimeout与setInterval的区别
2022/04/20 Javascript