【vite+vue3】 多页面应用模式

需要注意到的点：

1. 项目文件结构

2. vite.config.js 的配置

3. 访问地址的路径

---

假设你有下面这样的项目文件结构

├── package.json
├── vite.config.js
├── index.html
├── main.ts
└── src
    ├── project
        ｜————projectA
            ｜————api 
            ｜————router 
            ｜————views 
            ｜————index.html 
            ｜————main.ts
            ｜————app.vue  
        ｜————projectB  
            ｜————api 
            ｜————router 
            ｜————views 
            ｜————index.html 
            ｜————main.ts
            ｜————app.vue 
    └── views

在开发过程中，简单地导航或链接到 src/project/projectA/index.html - 将会按预期工作，与正常的静态文件服务器表现一致。

---

vite.config.js 文件如下：

// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'


// 当前执行node命令时文件夹的地址(工作目录)
const root = process.cwd()

export default defineConfig({
  base: './',
  root: root,
  build: {
    target: 'modules',
    minify: 'terser',
    outDir: env.VITE_OUT_DIR || 'dist',
    assetsDir: 'static', //指定生成静态文件目录
    rollupOptions: { // 配置多页面应用模式
      input: {
        input: {
          portalProject: path.resolve(__dirname, 'src/project/portalProject/index.html'),
          riskProject: path.resolve(__dirname, 'src/project/riskProject/index.html'),
        }
      },
      output: { // build 输出
          entryFileNames: 'static/js/[name]-[hash].js',
          chunkFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/name-[hash].[ext]',
        }
    },
  },
})

如果你指定了另一个根目录，请记住，在解析输入路径时，__dirname 的值将仍然是 vite.config.js 文件所在的目录。因此，你需要把对应入口文件的 root 的路径添加到 resolve 的参数中。

---

在package.json中打包或者启动命令如下：

npm run dev 即可。

访问地址变为localhost/src/project/portalProject/index.html

localhost/src/project/riskProject/index.html

当执行npm run build 时生成的目录如下：

---

 注意⚠️在运维部署时，访问该html，需要多写点路径才能正常访问