Vue Router生产环境失效求助：vue-cli webpack模板构建后路由异常

我之前也碰到过一模一样的情况——dev环境下路由跑得好好的，build完用Express部署就歇菜了，核心原因其实很简单：开发环境的webpack-dev-server自动帮我们处理了前端路由的 fallback，但生产环境的Express默认不知道这些前端路由对应的文件。

当你直接访问比如 /about 这种路由时，Express会去dist文件夹里找对应的about.html文件，找不到就返回404，自然Vue Router没法接管路由逻辑。下面是具体的解决步骤：

1. 确认Vue Router的配置（可选但推荐） #

如果你的路由用的是history模式（比hash模式更美观），确保router配置正确：

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history', // 开启history模式
  base: process.env.BASE_URL, // 对应vue.config.js里的publicPath，根路径就是'/'
  routes
})

export default router

如果是hash模式（URL带#），这一步可以跳过，但还是推荐用history模式。

2. 修改你的Express服务器代码 #

你需要给Express加一个全局路由处理，把所有非静态资源的请求都转发到dist/index.html，让Vue Router在客户端处理路由。修改后的server.js应该是这样：

const express = require('express')
const serveStatic = require('serve-static')
const path = require('path')
const app = express()

// 托管dist文件夹里的静态资源（css、js、图片等）
app.use(serveStatic(path.join(__dirname, 'dist')))

// 关键：所有路由请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'))
})

// 启动服务器
const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`服务器运行在端口 ${port} 上`)
})

3. 验证一下 #

重新执行npm run build生成最新的dist文件，然后运行node server.js，现在不管是刷新页面还是直接访问某个路由，Vue Router都能正常工作了。

如果你的应用部署在子路径下（比如http://yourdomain.com/my-app），记得要同步修改Vue Router的base为'/my-app/'，同时把Express的全局路由改成app.get('/my-app/*', ...)，确保路径匹配正确。

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