最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue-cli3打包代码后白屏怎么办 vue-cli3打包代码后白屏解决方法
时间:2020-09-02 编辑:袖梨 来源:一聚教程网
vue-cli3打包代码后白屏怎么办?本篇文章小编给大家分享一下vue-cli3打包代码后白屏解决方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
问题
打开 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;
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12