vue打包路由空白页面
路由器是家庭网络中的重要组成部分，如果您对路由器设置和使用存在疑问，本文vue打包路由空白页面将为您提供详细的操作指南和使用技巧。
本文目录一览：
- 1、vue项目打包后打开页面空白解决办法
- 2、vue-element-admin打包后网页空白解决方法
- 3、vue路由在多级页面下，页面刷新空白（history模式）
- 4、为什么vue打包后出现后 在浏览器上打开的是空白页
- 5、vue 页面空白问题总结
vue项目打包后打开页面空白解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。
1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。
assetsPublicPath默认的是 ‘/' 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ '
2、另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行 。如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。
vue-element-admin打包后网页空白解决方法
使用
命令进行打包
会出现这样的情况
生成了一个静态的文件夹,打开index.html的时候
会出现页面空白的问题
打开F12查看一下这是为啥
会发现这些文件的路径访问不到
在源码文件中打开 vue.config.js
将 publicPath: '/' 改成 publicPath: ‘./’
然后使用 npm run build:prod 重新打包
打开浏览器，路径都是正确的，没有报错，如果这个时候，还是不显示界面内容
需要打开 router 文件
路由模式将 histroy 改成 hash 模式，起初 mode:‘history’
vue路由在多级页面下，页面刷新空白（history模式）
需要修改config/index.js文件，将assetsPublicPath的值改为assetsPublicPath: './'
找到项目文件下的vue.config.js（没有就自己创建一个），将baseUrl:""改成baseUrl:"/"
找到项目文件下的vue.config.js（没有就自己创建一个），配置publicPath: '/', // 根路径 cli3.0以上使用publicPath替代baseUrl,解决build后找不到静态资源的问题
项目当中，路由模式不设置时，默认的是hash。
而设置history后，一级路由刷新页面不会报错，而二级以上路由，会出现这么一个问题，
提示：
这时候，我们点击错误，发现问题出现在public中的index.html中，
首先，我们可以排除是vue原页面的问题，
我们每次刷新页面的前打开浏览器的network，我们再刷新，然后会发现，js请求的位置不对，
原因：
在history模式中，请求多级路由下的静态资源，会带上多级路由的地址
解决方法：
为什么vue打包后出现后 在浏览器上打开的是空白页
这是因为路由配置中路劲的问题，原因是你配置的URL是这种形式的：
但是你的路由配置却是直接访问了根目录，所以导致资源可以加载但是组件无法渲染的现象。
需要将路由配置改为：
export
default
new
Router
vue 页面空白问题总结
页面空白我遇到的就如下几种情况
1.路由异常，
一般是next()函数没有被执行
不执行的原因就是在 beforeEach 里
a.if判断的某个分支让它没有走next()
b.某个异常跳出导致没有执行
c.网络请求 只处理了then的情况，没有处理catch情况
2.html渲染报错，常见的就是key相同了
3.js解析报错，常见的es6语法在某些手机里不支持，特别是对象扩展符(...),promise的finally不支持等等。
4.网络请求异常导致的， 特别是 跨域请求异常 导致的，经常出现这个情况
如果您遇到路由器或Wi-Fi设置方面的问题，不要担心。参考本文，您可以轻松地了解如何正确地进行设置和调整。祝您享受更快，更安全的网络体验！
