vue 3.0用history路由打包后出现空白页面,出现这个问题可以先检查两个方面

1. 打包路径是否有误,这个打开控制台就可以看到,如果有出现报错,则说明打包的路径不对,这时要修改打包的路径。

比如项目是放在/dist/下,访问的路径为http://127.0.0.1/dist/,那打包的路径要修改为/dist/

router.js的设置

export default new Router({
  mode: 'history',
  // base: process.env.BASE_URL,
  base: '/dist/',
  routes: [...]

vue.config.js的设置

module.exports = {
  publicPath: '/dist/',
  outputDir: 'dist',

打包后我是放在本地的nginx下的
在这里插入图片描述
输入http://127.0.0.1/dist/就可以访问啦

2. 如果/目录可以访问,从/跳转过去也可以访问,直接输入其他页面却不能访问,这样子就要设置一下nginx了,更详细地请看官方文档

 location / {
     try_files $uri $uri/ /dist/index.html;
     # $uri是一个变量,代表访问的路径,这样设置就是当访问不到的路径的时候跳转回首页,跳转回首页之后,vue.router就会将我们所输入的地址push进去了,从而实现访问
 }

由于这个是单页面应用,只有一个html文件,直接输入路径肯定是找不到的,vue访问其他路由是通过router.push进去的。

$uri是一个变量,代表访问的路径,这样设置就是当访问不到的路径的时候跳转回首页,跳转回首页之后,vue.router就会将我们所输入的地址push进去了,从而实现访问

修改后,重启一下nginx应该就可以访问了

参考于官方文档
vue路由详解:https://router.vuejs.org/zh/api/#router-link
HTML5 History 模式:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

Logo

前往低代码交流专区

更多推荐