vue3-ts-vite：vue 项目 配置 多页面应用

在Vue 3项目中使用Vite构建时，要配置多页面应用，你需要在vite.config.ts文件中使用build.rollupOptions.input配置项来指定多个入口文件。每个入口将会被视作一个独立的页面。

以下是一个配置多页面应用的基本示例：

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// 页面配置数组
const pages = [
  {
    entry: 'src/pages/index/main.ts', // 页面的入口文件
    template: 'public/index.html', // 页面模板
    filename: 'index.html', // 生成的页面文件名
    title: 'Index Page', // 页面标题
  },
  {
    entry: 'src/pages/about/main.ts',
    template: 'public/about.html',
    filename: 'about.html',
    title: 'About Page',
  },
  // 可以添加更多页面
];
 
// 页面配置转换函数
function pageConfigToOutput(page) {
  return {
    entry: page.entry,
    template: {
      fileName: page.template,
      title: page.title,
    },
    out: page.filename,
  };
}
 
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: pages.reduce((entries, page) => {
        entries[page.filename] = page.entry;
        return entries;
      }, {}),
    },
    // 为每个页面生成对应的输出配置
    // 这里可以进一步自定义输出配置
    outDir: 'dist',
    emptyOutDir: true,
    manifest: true,
    minify: 'terser',
    target: 'esnext',
    polyfillDynamicImport: false,
  },
  // 为每个页面生成对应的页面配置
  publicDir: 'public',
  server: {
    open: true,
  },
});

在上述配置中，pages数组包含了每个页面的配置信息。pageConfigToOutput函数将页面配置转换为Vite需要的输出配置。然后，通过reduce方法将这些配置合并到rollupOptions.input中。

确保每个页面的入口文件和模板文件与配置中指定的路径相匹配。在实际项目中，你可能需要根据具体的项目结构和需求来调整这些配置。