Vue.js路由基础配置导致开发模式下链接失效问题

核心原因 #

路由base与Vue CLI的publicPath配置不匹配，导致异步组件等资源的请求路径错误。当路由base设为/app/时，页面导航到/app/groups后，资源会从/app/路径下请求，但开发模式下publicPath为空（根路径），服务器实际资源在根目录的js/等文件夹下，因此出现404。

修复步骤 #

1. 同步开发环境的publicPath与路由base #

修改vue.config.js，将开发模式的publicPath设置为/app/，与路由base保持一致：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === 'production' ? '/static/spa' : '/app/', 
  outputDir: '../static/spa', 
  indexPath: '../../templates/index.html', 
})

2. 用环境变量自动匹配路由base（可选但推荐） #

将路由配置中的base改为使用Vue CLI自动注入的process.env.BASE_URL，这样开发和生产环境的base会自动与publicPath同步，无需手动修改路由代码：

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

3. 调整开发服务器访问路径 #

修改配置后，开发模式下需要访问http://localhost:8080/app/才能进入应用，而不是原来的根路径http://localhost:8080/。此时路由导航和资源加载都会正常工作。

验证 #

启动开发服务器后，访问http://localhost:8080/app/，点击跳转到groups的链接，控制台不再出现404错误，异步组件能正常加载。

内容的提问来源于stack exchange，提问作者Tobias K.