Vue.js：执行npm run build时如何生成子路由对应的index.html文件夹

问题原因 #

Vue默认以SPA模式构建，只会生成根路由的index.html，所有子路由依赖前端JavaScript动态渲染。静态托管服务器（非Node.js环境）直接访问子路由时，会找不到对应文件返回404——这和Nuxt默认的SSG/SSR模式不同，Nuxt会自动为每个路由生成静态文件。

解决方案：生成对应子路由的静态文件 #

根据你的项目类型（Vue 3+Vite / Vue 2+Vue CLI），选择以下配置：

情况1：Vue 3 + Vite项目 #

1. 安装预渲染插件

   npm install vite-plugin-ssg -D
   

2. 修改vite.config.js

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import { ssg } from 'vite-plugin-ssg'
   
   export default defineConfig({
     plugins: [
       vue(),
       ssg({
         routes: ['/', '/about'] // 列出所有需要生成静态文件的路由
       })
     ]
   })
   

3. 更新package.json的build命令

   "scripts": {
     "build": "vite-ssg build"
   }
   

4. 执行npm run build，此时dist目录下会生成/about文件夹及其中的index.html。

情况2：Vue 2 + Vue CLI项目 #

1. 安装预渲染插件

   npm install prerender-spa-plugin -D
   

2. 修改vue.config.js

   const PrerenderSPAPlugin = require('prerender-spa-plugin')
   const path = require('path')
   
   module.exports = {
     configureWebpack: {
       plugins: [
         new PrerenderSPAPlugin({
           staticDir: path.join(__dirname, 'dist'),
           routes: ['/', '/about'] // 列出所有需要生成静态文件的路由
         })
       ]
     }
   }
   

3. 执行npm run build，dist目录下会自动生成/about/index.html。

补充说明 #

如果不需要预渲染内容，也可以配置静态服务器将所有404请求 fallback 到根目录的index.html，但这种方式依赖服务器配置，而生成静态文件的方案更适配你的非Node.js托管环境。

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