vite多页面配置项目实战

{ dist: // 存放打包后的文件, node_modules: , src: { assets: // 一些静态文件, components: // 公用组件, index: { // 页面1 index.html, main.js, App.vue, ... }, page: { // 页面2 index.html, main.js, App.vue, ... }, ... index.html // 用于页面初始进入时重定向 }, package.json: , vite.config.js: // 配置文件 }

{ admin: path.resolve(__dirname, 'src/index.html'), // 用于页面重定向 index: path.resolve(__dirname, 'src/index/index.html'), // 页面一 page: path.resolve(__dirname, 'src/page/index.html'), // 页面二 } 

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' export default defineConfig({ // 服务 server: { // 服务器主机名 host: '0.0.0.0', // 端口号 port: 3000, // 设为 true 时若端口已被占用则会直接退出， // 而不是尝试下移一格端口 strictPort: false, // http.createServer() 配置项 // https: '', proxy: { '/api': { target: 'http://...............', changeOrigin: true, rewrite: (path) => { return path.replace(/^\/api/, '') } } }, // 开发服务器配置 CORS // boolean | CorsOptions cors: {}, // 设置为 true 强制使依赖构建 // force: true, // 禁用或配置HMR连接 hmr: {}, // 传递给 chokidar 的文件系统监视器选项 watch: {} }, // 项目根目录 // root: process.cwd(), root: './src/', // 项目部署的基础路径 base: '/', // 环境配置 mode: 'development', // 全局变量替换 Record define: {}, // 插件 plugins: [vue()], // 静态资源服务文件夹 publicDir: 'public', resolve: { alias: { '@': path.resolve(__dirname, 'src'), 'components': path.resolve(__dirname, 'src/components') }, dedupe: [], // 情景导出package.json 配置中的 exports 字段 conditions: [], // 解析package.json 中的字段 mainFields: ['module', 'jsnext:main', 'jsnext'], // 导入时想要省略的扩展名列表 extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] }, css: { // 配置css modules 的行为， 选项被传递给postcss-modules modules: {}, // PostCSS 配置（格式同postcss.config.js） // postcss-load-config 的插件配置 postcss: {}, // 指定传递给 CSS 预处理器的选项 preprocessorOptions: { } }, json: { // 是否支持从 .json 文件中进行按名导入 namedExports: true, // 若设置为 true, 导入的 JSON 会被转换为 export default JSON.parse("...") 会比转译成对象字面量性能更好 // 尤其是当 JSON 文件较大时 // 开启此项， 则会禁用按名导入 stringify: false }, // 继承自 esbuild 转换选项， 最常见的用例是自定义 JSX esbuild: { jsxFactory: 'h', jsxFragment: 'Fragment', jsxInject: `import React from 'react'` }, // 静态资源处理   字符串 || 正则表达式 assetsInclude: '', // 调整控制台输出的级别 'info' | 'warn' | 'error' | 'silent' logLevel: 'info', // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息 clearScreen: true, build: { // 浏览器兼容性 ‘esnext' | 'modules' target: 'modules', //输出路径 outDir: '../dist', // 生成静态资源的存放路径 assetsDir: '../assets', // 小于此阈值的导入或引用资源将内联为 base64 编码， 以避免额外的http请求， 设置为 0, 可以完全禁用此项， assetsInlineLimit: 4096, // 启动 / 禁用 CSS 代码拆分 cssCodeSplit: true, // 构建后是否生成 soutrce map 文件 sourcemap: false, // 自定义底层的 Rollup 打包配置 rollupOptions: { input: { admin: path.resolve(__dirname, 'src/index.html'), page: path.resolve(__dirname, 'src/page/index.html'), index: path.resolve(__dirname, 'src/index/index.html'), }, output: { chunkFileNames: 'static/js/[name]-[hash].js', entryFileNames: 'static/js/[name]-[hash].js', assetFileNames: 'static/[ext]/[name]-[hash].[ext]', } }, // @rollup/plugin-commonjs 插件的选项 commonjsOptions: {}, // 构建的库 // lib: { entry: string, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string }, // 当设置为 true, 构建后将会生成 manifest.json 文件 manifest: false, // 设置为 false 可以禁用最小化混淆 // 或是用来指定是应用哪种混淆器 // boolean | 'terser' | 'esbuild' minify: 'terser', // 传递给 Terser 的更多 minify 选项 terserOptions: {}, // 设置为false 来禁用将构建好的文件写入磁盘 write: true, // 默认情况下 若 outDir 在 root 目录下， 则 Vite 会在构建时清空该目录。 emptyOutDir: true, // 启用 / 禁用 brotli 压缩大小报告 brotliSize: false, // chunk 大小警告的限制 chunkSizeWarningLimit: 500 } })