Vue应用部署至服务器子目录后<router-view />无内容显示求助

核心问题原因 #

你的问题由路由配置错误、子目录路径未声明两个问题共同导致：

• Vue Router 4 已废弃mode配置项，你同时声明createWebHistory()（对应history模式）和mode: 'hash'属于无效冗余配置
• 部署在/vue/子目录下时，未给路由配置base路径，也未配置打包公共路径，导致路由无法匹配访问路径，无对应组件渲染所以出现空白，且无报错信息。

分步修复方法 #

1. 修正路由配置 #

根据你需要的路由模式二选一修改route.js：

方案A：使用history模式

import { createRouter, createWebHistory } from "vue-router";

// 原有routes配置保持不变

const router = createRouter({
  history: createWebHistory('/vue/'), // 传入子目录作为base路径
  routes,
  // 删除废弃的mode: 'hash'配置项
});

方案B：使用hash模式

import { createRouter, createWebHashHistory } from "vue-router"; // 替换导入的方法

// 原有routes配置保持不变

const router = createRouter({
  history: createWebHashHistory('/vue/'), // 传入子目录作为base路径
  routes,
  // 删除废弃的mode: 'hash'配置项
});

2. 配置打包公共路径 #

需要在打包工具配置中指定静态资源的子目录路径：

• 若使用Vue CLI，修改vue.config.js：

module.exports = {
  publicPath: '/vue/'
}

• 若使用Vite，修改vite.config.js：

import { defineConfig } from 'vite'
export default defineConfig({
  base: '/vue/'
})

3. （history模式必填）服务器端重定向配置 #

如果使用history模式，需要额外配置服务器规则避免刷新404，Nginx配置示例：

location /vue/ {
try_files $uri $uri/ /vue/index.html;
}

修改完成后重新打包部署即可恢复正常。

内容的提问来源于stack exchange，提问作者Dean TristaNato