Vite多页面配置

目录结构

在vite中，如果需要配置多页面，必须在项目根目录下另外建一个目录，如nested（不能建在src目录下，否则无法访问）。访问地址为/nested/。

├── package.json
├── vite.config.js
├── tsconfig.json
├── tailwind.config.js
├── index.html
├── src
│   ├── App.vue
│   └── main.ts
└── nested
    ├── index.html
    ├── main.ts
    └── nested.js

vite.config.js配置

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

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        nested: resolve(__dirname, 'nested/index.html'),
      },
    },
  },
})

其它配置

typescript配置

ts配置中加入相应目录

tsconfig.json

  ...
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "nested/**/*.ts", "nested/**/*.vue", "mock/**/*.ts"],
  ...

tailwind配置

如果使用了tailwind，还需要修改tailwind配置

tailwind.config.js

  ...
  content: ['./src/**/*.{vue,ts}', './nested/**/*.{vue,ts}'],
  ...

参考资料

• vite官方文档：https://vitejs.dev/guide/build.html#multi-page-app