vite的生产环境配置

将项目部署到 /my-app/ 子目录。在 Vite 中，生产环境的配置主要通过 vite.config.js 的 build 配置项完成。

1.build.outDir：指定构建输出目录（默认为 dist）。

export default defineConfig({
  build: {
    outDir: 'build', // 将输出目录改为 "build"
  },
});

2.build.target：指定构建目标浏览器或 Node.js 版本，确保代码兼容性。

build: { target: 'es2020', // 或指定浏览器版本，如 { chrome: 90, safari: 'latest' } }

3.build.minify：启用代码压缩，默认使用 esbuild，也可切换为 terser。

build: { minify: 'terser', // 使用 Terser 进行更深度的压缩 
terserOptions: { compress: { drop_console: true }, // 移除 console.log }, },

4.build.assetsDir：指定静态资源（如图片、字体）的输出目录（默认为 assets）。

build: { assetsDir: 'static', // 将静态资源输出到 "dist/static" },

5.build.assetsInlineLimit：设置小于该大小的资源以 Base64 内联（默认 4096 字节）。

​​​​​​​

build: { assetsInlineLimit: 0, // 禁用内联资源（适合需要 CDN 的场景） },

6.build.rollupOptions：自定义 Rollup 配置，控制代码分割、输出格式等。

 6.1external（外部依赖排除）‌

• ‌作用‌：声明不打包进最终产物的第三方依赖（如 vue、lodash），减小构建体积‌。
• ‌配置示例‌：

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      external: ['vue', 'axios']  // 或使用正则表达式：/node_modules/
    }
  }
});

‌6.2 input（入口文件配置）‌

• ‌单入口‌：

  input: 'src/main.js' // 默认入口路径‌

• ‌多入口‌（多页应用）：

  input: { 
  main: resolve(__dirname, 'index.html'), 
  admin: resolve(__dirname, 'admin.html') 
  } 
  

6‌.4output（输出配置）‌

• ‌基础选项‌：
  • dir：输出目录（默认 dist）‌16。
  • format：模块格式（如 es、cjs、umd），默认 es‌16。
• ‌文件命名规则‌：

output: {
  chunkFileNames: 'static/js/[name]-[hash].js',  // 代码分割后的 chunk 文件
  entryFileNames: 'static/js/[name]-[hash].js',   // 入口文件
  assetFileNames: (assetInfo) => {                // 静态资源（图片、字体）
    if (assetInfo.name?.endsWith('.png')) {
      return 'static/img/[name]-[hash][ext]';
    }
    return 'static/[ext]/[name]-[hash][ext]';
  }
}  // 自定义输出路径和文件名‌

entryFileNames‌‌：控制入口文件（如 main.js）的输出路径和命名规则。入口文件会集中到 static/js/ 目录，文件名格式为 [入口名]-[哈希].js

dist/
└── static/
    └── js/
        ├── main-abc123.js     // 主入口
        └── admin-def456.js   // 多页应用的另一个入口

chunkFileNames‌：控制通过代码分割（Code Splitting）生成的异步 chunk 文件的路径和命名规则。

• static/js/：所有分割后的 chunk 文件（如懒加载的组件）会输出到 dist/static/js 目录。
• [name]：自动替换为 chunk 的名称（通常基于模块名或 ID）。
• [hash]：根据文件内容生成唯一的哈希字符串（如 abc123），确保内容变化时文件名变化，打破浏览器缓存。

dist/
└── static/
    └── js/
        ├── Home-abc123.js    // 页面组件分割的 chunk
        └── utils-def456.js   // 工具函数分割的 chunk

assetFileNames‌‌：控制静态资源（图片、字体、CSS 等）的输出路径和命名规则，通过函数动态判断资源类型。

dist/
└── static/
    ├── img/
    │   └── logo-abc123.png     // PNG 图片
    ├── fonts/
    │   └── font-def456.woff2  // 字体文件
    └── css/
        └── style-ghi789.css    // CSS 文件

 6.5 manualChunks（手动分块）

• ‌作用‌：将指定依赖拆分为独立 chunk，优化缓存策略‌18。
• ‌示例‌：

manualChunks: {
  echarts: ['echarts'],       // 单独打包 echarts
  vendor: ['vue', 'vue-router']  // 合并核心依赖
}

7.build.publicDir：指定静态资源目录（默认 public），内容会直接复制到输出目录的根路径。

build: { publicDir: 'static', // 使用 "static" 文件夹作为公共资源目录 },

8.build.splitting：启用代码分割（默认开启）。

build: { splitting: true, // 按需加载代码块 },

9.build.cssCodeSplit：按需分割 CSS 文件（默认开启）。

build: {
 cssCodeSplit: true, // 将 CSS 与对应的 JS 代码块一起分割
 },

10.build.sourcemap：生成 Source Map 用于调试（默认生产环境不生成）。

build: { 
sourcemap: 'hidden', // 生成但不公开
 Source Map },

11.build.lib：将项目构建为库（Library）。

将项目打包为可复用的库（如组件库、工具库），而非完整的应用

build: { lib: { entry: path.resolve(__dirname, 'src/main.js'), // 入口文件 
name: 'MyLib', // 全局变量名
 formats: ['es', 'umd'], // 支持的模块格式 
fileName: (format) => `my-lib.${format}.js`, }, },

 entry‌：

• ‌功能‌：指定库的入口文件（源码入口）。
• ‌示例‌：lib/main.js 是库的源代码入口，包含导出的函数、组件等。
• ‌路径处理‌：使用 resolve(__dirname, ...) 确保跨平台路径正确解析。

name‌：

• ‌功能‌：定义 UMD 格式的全局变量名（浏览器环境下通过 window.MyLib 访问）。
• ‌示例‌：若打包为 umd 格式，HTML 中通过  引入后，可通过 window.MyLib 调用库内容。

formats‌：

• ‌功能‌：指定输出的模块格式，支持 es（ES 模块）、cjs（CommonJS）、umd（通用模块）等。
• ‌示例‌：
  • es：生成 my-lib.es.js，供现代构建工具（如 Vite、Webpack）通过 import 引入。
  • umd：生成 my-lib.umd.js，兼容浏览器直接引入（通过 

     在代码中通过全局变量引入：

    globalThis.vue = Vue; // 在入口文件中声明全局变量
    

     在 Vite 配置中排除库的打包：

    optimizeDeps: {
      exclude: ['vue', 'vue-router'], // 排除已通过 CDN 引入的库
    },