vue 3.0用history路由打包后出现空白页面

最新推荐文章于 2025-04-10 23:25:18 发布

丑小喵喵

最新推荐文章于 2025-04-10 23:25:18 发布

阅读量4.1k

点赞数

分类专栏： vue笔记文章标签： vue3.0打包 history路由 vue router 空白页面

本文链接：https://blog.youkuaiyun.com/qq_39851888/article/details/103442494

版权

vue笔记专栏收录该内容

1 篇文章

订阅专栏

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