我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情
vite.config.js配置文件选项注释说明
//vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
export default defineConfig({
//项目根目录
root: process.cwd(),
//项目部署的基础路径
base: "/",
//环境配置 'development'|'production'
mode: "development",
//全局常量替换 Record<string, string>
define: {
"": "",
user: "users",
},
//插件
plugins: [vue()],
//静态资源服务的文件夹
publicDir: "public",
//存储缓存文件的目录
cacheDir: "node_modules/.vite",
resolve: {
//别名
alias: {
"@": path.resolve(__dirname, "/src"),
comps: path.resolve(__dirname, "/src/components"),
},
dedupe: [],
//解决程序包中package.json配置中的exports 字段
conditions: [],
//解析package.json中字段的优先级
mainFields: ["module", "jsnext:main", "jsnext"],
//导入时想要省略的扩展名列表
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
//使Vite通过原始文件路径而不是真正的文件路径确定文件身份
preserveSymlinks: false,
},
css: {
//配置 CSS modules 的行为。选项将被传递给 postcss-modules。
modules: {},
// PostCSS 配置（格式同 postcss.config.js）
// postcss-load-config 的插件配置
postcss: {},
//指定传递给 CSS 预处理器的选项
preprocessorOptions: {
scss: {
additionalData: `$injectedColor: orange;`,
},
},
//开发过程中是否启sourcemap
devSourcemap: false,
},
json: {
//是否支持从 .json 文件中进行按名导入
namedExports: true,
//若设置为 true，导入的 JSON 会被转换为 export default JSON.parse("...") 会比转译成对象字面量性能更好，
stringify: false,
},
//继承自 esbuild 转换选项。最常见的用例是自定义 JSX
esbuild: {
jsxFactory: "h",
jsxFragment: "Fragment",
jsxInject: `import React from 'react'`,
},
//静态资源处理 字符串|正则表达式
assetsInclude: ["**/*.gltf"],
//调整控制台输出的级别 'info' | 'warn' | 'error' | 'silent'
logLevel: "info",
//设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息
clearScreen: true,
//加载 .env 文件的目录
envDir: "",
//envPrefix开头的环境变量会通过import.meta.env暴露客户端源码
envPrefix: "VITE_",
//设置'spa' | 'mpa' | 'custom'应用操作
appType: "spa",
//服务
server: {
//服务器主机名
host: "localhost",
//端口号
port: "5173",
//设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
strictPort: true,
//https.createServer()配置项
https: "",
//服务器启动时自动在浏览器中打开应用程序。
open: "/docs/index.html",
//自定义代理规则
proxy: {
// 字符串简写写法
"/foo": "http://localhost:4567",
// 选项写法
"/api": {
target: "http://jsonplaceholder.typicode.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
// 正则表达式写法
"^/fallback/.*": {
target: "http://jsonplaceholder.typicode.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/fallback/, ""),
},
// 使用 proxy 实例
"/api": {
target: "http://jsonplaceholder.typicode.com",
changeOrigin: true,
configure: (proxy, options) => {
// proxy 是 'http-proxy' 的实例
},
},
// Proxying websockets or socket.io
"/socket.io": {
target: "ws://localhost:3000",
ws: true,
},
},
//开发服务器配置 CORS
cors: {},
//指定服务器响应的 header ,类型OutgoingHttpHeaders
header: {},
//禁用或配置 HMR 连接
hmr: {},
//传递给 chokidar 的文件系统监视器选项
watch: {},
//中间件模式创建 Vite 服务器,'ssr' | 'html'
middlewareMode: "ssr",
//HTTP请求中预留此文件夹，用于代理 Vite 作为子文件夹时使用。
base: "",
fs: {
//限制为工作区 root 路径以外的文件的访问
strict: true,
//限制哪些文件可以通过 /@fs/ 路径提供服务
allow: [
// 搜索工作区的根目录
searchForWorkspaceRoot(process.cwd()),
// 自定义规则
"/path/to/custom/allow",
],
//限制Vite开发服务器提供敏感文件的黑名单
deny: [".env", ".env.*", "*.{pem,crt}"],
},
//定义开发调试阶段生成资产的url
origin: "http://127.0.0.1:8080",
},
//构建
build: {
//浏览器兼容性 "esnext"|"modules"
target: "modules",
//否自动注入 module preload 的 polyfill
polyfillModulePreload: true,
//输出路径
outDir: "dist",
//生成静态资源的存放路径
assetsDir: "assets",
//小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
assetsInlineLimit: 4096,
//启用/禁用 CSS 代码拆分
cssCodeSplit: true,
//不同的浏览器target设置CSS的压缩
cssTarget: "",
//构建后是否生成 source map 文件
//boolean | 'inline' | 'hidden'
sourcemap: false,
//自定义底层的 Rollup 打包配置
rollupOptions: {
//要打包的文件路径
input: "src/main.js",
//文件输出位置
output: {
//打包生产文件路径
file: "dist/index.js",
//打包输出格式
// "amd", "cjs", "system", "es", "iife" or "umd
format: "cjs",
//包的全部变量名称
name: "bundleName",
//声明全局变量
globals: {
jquery: "$",
},
},
//插件
plugins: [],
//不需打包的文件
external: ["lodash"],
},
//@rollup/plugin-commonjs 插件的选项
commonjsOptions: {},
//@rollup/plugin-dynamic-import-vars 选项
dynamicImportVarsOptions: {},
//构建的库
lib: {
entry: path.resolve(__dirname, "lib/main.js"),
//暴露的全局变量
name: "mylib",
//'es' | 'cjs' | 'umd' | 'iife'
formats: "es",
//输出的包文件名
fileName: "my-lib",
},
//当设置为 true，构建后将会生成 manifest.json 文件
manifest: false,
//当设置为 true，构建后将会生成SSR的manifest.json 文件
ssrManifest: false,
//生成面向 SSR 的构建
ssr: "undefined",
//设置为 false 可以禁用最小化混淆，
//boolean | 'terser' | 'esbuild'
minify: "esbuild",
//传递给 Terser 的更多 minify 选项。
terserOptions: {},
//设置为 false 来禁用将构建后的文件写入磁盘
write: true,
//默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
emptyOutDir: true,
//启用/禁用 gzip 压缩大小报告
reportCompressedSize: true,
//触发警告的 chunk 大小（以 kbs 为单位）
chunkSizeWarningLimit: 500,
//设置为 {} 则会启用 rollup 的监听器
watch: null,
},
//开发服务器
preview: {
//开发服务器主机名
host: "localhost",
//开发服务器端口号
port: "5173",
//设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
strictPort: true,
//https.createServer()配置项
https: "",
//服务器启动时自动在浏览器中打开应用程序。
open: "/docs/index.html",
//开发服务器，自定义代理规则
proxy: {
// 字符串简写写法
"/foo": "http://localhost:4567",
// 选项写法
"/api": {
target: "http://jsonplaceholder.typicode.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
// 正则表达式写法
"^/fallback/.*": {
target: "http://jsonplaceholder.typicode.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/fallback/, ""),
},
// 使用 proxy 实例
"/api": {
target: "http://jsonplaceholder.typicode.com",
changeOrigin: true,
configure: (proxy, options) => {
// proxy 是 'http-proxy' 的实例
},
},
// Proxying websockets or socket.io
"/socket.io": {
target: "ws://localhost:3000",
ws: true,
},
},
//开发服务器配置 CORS
cors: {},
},
//依赖优化选项
optimizeDeps: {
//检测需要预构建的依赖项
entries: [],
//预构建中强制排除的依赖项
exclude: ["jquery"],
//默认情况下，不在 node_modules 中的，链接的包不会被预构建。使用此选项可强制预构建链接的包。
include: [],
//部署扫描和优化过程中传递给EsBuild
esbuildOptions: {},
//设置为 true 可以强制依赖预构建，而忽略之前已经缓存过的、已经优化过的依赖
force: true,
},
//SSR 选项
ssr: {
//列出的是要为 SSR 强制外部化的依赖
external: [],
//列出的是防止被 SSR 外部化依赖项。
noExternal: [],
//SSR 服务器的构建目标
target: "node",
//SSR 服务器的构建语法格式 'esm' | 'cjs'
format: "esm",
},
worker: {
//worker 打包时的输出类型 'es' | 'iife'
format: "iife",
// worker 打包的 Vite 插件
plugins: [],
//打包 worker 的 Rollup 配置项
rollupOptions: {},
},
});
