如何在Express多页应用的独立路由中部署Vue SPA？

一、Vue.js 项目配置 #

1. 设置基础路径 #

在Vue项目根目录创建或修改vue.config.js，指定打包后的资源基础路径为/admin/，确保静态资源能正确加载：

module.exports = {
  publicPath: '/admin/',
  outputDir: 'dist' // 默认打包目录，可按需修改
}

2. 配置Vue Router #

使用history模式，并设置路由基础路径为/admin，避免hash路由的#符号，同时确保SPA内部路由正常工作：

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Dashboard from '../views/Dashboard.vue'
import PostManager from '../views/PostManager.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Dashboard',
    component: Dashboard
  },
  {
    path: '/posts',
    name: 'PostManager',
    component: PostManager
  }
]

const router = new VueRouter({
  mode: 'history',
  base: '/admin',
  routes
})

export default router

3. 打包Vue项目 #

执行打包命令生成生产环境文件：

npm run build

打包完成后会得到dist文件夹，里面是SPA的所有静态资源。

二、Express 服务器配置 #

1. 托管Vue静态资源 #

将Vue打包后的dist文件夹复制到Express项目的静态资源目录（比如public/admin），然后在Express中配置静态资源托管：

// app.js
const express = require('express')
const path = require('path')
const app = express()

// 托管Vue Admin的静态资源
app.use('/admin', express.static(path.join(__dirname, 'public/admin')))

2. 处理SPA History模式路由回退 #

由于Vue使用history模式，直接访问/admin/dashboard这类子路由会返回404，需要添加中间件捕获所有/admin开头的非静态资源请求，返回Vue的index.html：

// 放在静态资源托管之后，原有业务路由之前
app.use('/admin', (req, res) => {
  res.sendFile(path.join(__dirname, 'public/admin/index.html'))
})

3. 保留原有Express多页路由 #

确保你的原有Express路由（比如博客首页、文章详情页）放在上述SPA路由处理之前，避免被覆盖：

// 原有博客路由示例
app.get('/', (req, res) => {
  res.render('index', { title: '我的博客' })
})

app.get('/posts/:id', (req, res) => {
  res.render('post', { postId: req.params.id })
})

三、验证配置 #

启动Express服务器后：

• 访问根路径/会加载原有Express多页博客
• 访问/admin/dashboard会加载Vue SPA的仪表盘页面
• SPA内部的路由跳转（比如/admin/posts）能正常工作

内容的提问来源于stack exchange，提问作者V S Vuca