本文记录下vite4 文档中的vite.config部分参数翻译与实践。
使用vite4.0 创建react项目
创建项目先
npm create vite@latest tempApp -- --template react-ts
目录格式
.
├── index.html 项目入口
├── package.json
├── public
├── src
│ ├── App.tsx
│ ├── main.tsx
│ ├── index.scss
│ ├── app.module.css
│ ├── assets 资源目录（图片、less、css等）
│ ├── components 项目组件
│ └── vite-env.d.ts 全局声明
│
├── tsconfig.json ts配置
├── .gitignore git忽略配置
├── vite.config.ts vite配置
├── .env.development development环境变量
├── .env.production production环境变量
生成的package.json文件
{
"name": "tempapp",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.58.0"
},
"devDependencies": {
"@types/node": "^18.13.0",
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"@vitejs/plugin-react": "^3.1.0",
"typescript": "^4.9.3",
"vite": "^4.1.0"
}
}
配置vite.config.ts
配置与作用见下列行内注释，部分翻译可能有误。
import { defineConfig, loadEnv } from 'vite';
import react from "@vitejs/plugin-react";
import * as path from "path";
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
console.log('mode:',mode);// 开发模式'development'，生产模式"production";
// 加载自定义环境文件,
const customEnv = loadEnv(mode, process.cwd(), ''); // 项目根目录下新建文件.env.development;便可加载自定义环境文件,
// console.log('env:',env);
const baseConfig = {
// root: process.cwd(),// 入口index.html的位置，默认为process.cwd()，可以不填;
base: '/',// 基础公共路径 默认/，用于定义开发和线上环境资源访问路径，线上模式需自行配置绝对路径
plugins: [react()],// 插件数组，react()配置后不需要每页再import React from 'react'
// publicDir: "public", // 静态资源入口，默认"public"，可不填，该文件夹下的内容会全部复制到输出dist文件夹内
// cacheDir: "node_modules/.vite", // 指定缓存目录 ，默认"node_modules/.vite"，可不填，该路径下的文件会预先打包，用于提升性能，
css: {
// CSS Modules 用于样式隔离，需要将.css文件改为.module.css类型才能生效
modules: {
scopeBehaviour: "local",// 可选 'global' | 'local',
globalModulePaths: [/.index.css$/],
// 配置css编译后在浏览器中的类名
generateScopedName: mode === "development" ? "[path][hash]__[local]" : "[hash]__[local]",
hashPrefix: 'string',
localsConvention : "camelCase",
},
// 同postcss 配置
postcss:{
plugins: []
},
// css预处理器配置
preprocessorOptions: {
scss: {
additionalData: `$injectedColor: orange;`,// 注入全局变量，可在.scss中直接使用$injectedColor
},
styl: {
additionalData: `$injectedColor ?= orange`,
},
},
devSourcemap:false,
},
json: {
namedExports:true,// 支持导出.json文件，默认true
stringify:false,// 导出时自动调用JSON.parse(),默认false
},
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
},
// assetsInclude:['**/*.gltf'],// 指定要被视为静态资源，当从 HTML 引用或通过 fetch 或 XHR 直接请求时，它们将被排除在插件转换管道之外。
// 从JS导入它们将返回它们解析的URL字符串（如果设置enforce: 'pre'，该设置可以被覆盖，插件以不同的方式处理资源）。
resolve: {
alias: {
"@": path.resolve(__dirname, "src"), // 别名配置后，在tsconfig中也需要配置相应的别名
},
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"], // 默认值，这些文件引入时不需要写后缀
// dedupe:["react","react-dom"],// 同一个依赖存在多份时，强制使用根路径下的node_modules中的。可不填
// conditions: ['import','module','default'],// 允许的额外的exports方式，可不填，
// mainFields: ['module', 'jsnext:main', 'jsnext'], //解析包的入口点时要尝试字段列表。可不填，没看懂具体啥意思
// preserveSymlinks:false, // 资源是否强制使用原始路径，既是否允许重定向，默认值false，为允许
},
server: {
host: "127.0.0.1", // default 为localhost
port: 3001, // default 5173
strictPort: true, // 设为TRUE时若端口被占用会直接退出，FALSE会尝试下一个可用端口
open: true, // 自动打开浏览器；当此值为字符串时，会被用作 URL 的路径名
// https: true, // Type: boolean | https.ServerOptions 升级为TLS+HTTP/2，尽在proxy存在是生效
// proxy: {
// // string shorthand: http://localhost:5173/foo -> http://localhost:4567/foo
// '/foo': 'http://localhost:4567',
// // with options: http://localhost:5173/api/bar-> http://jsonplaceholder.typicode.com/bar
// '/api': {
// target: 'http://jsonplaceholder.typicode.com',
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, ''),
// },
// } // 配置代理示例
// cors: true,// Type: boolean | CorsOptions，跨域默认全部允许
// fs:{
// strict:true,// 默认true，只能访问工作区内的文件
// allow:['./src'],// 允许访问的工作区内的入口，当strict为true时，访问allow列表以外的工作区外路径会403
// deny:['.env', '.env.*', '*.{crt,pem}'],// 限制访问的文件，这些提供给vite dev serve敏感文件
// }
},
build: {
target:'modules',// 编译目标
modulePreload:{ polyfill: true }, // 自动注入polyfill
outDir:'dist',
assetsDir:'assets',
assetsInlineLimit:4096,// 小于4kb的转化为base64编码
cssCodeSplit:true, // css 分包
// cssTarget:'modules', // 默认与build.target一样，使用wechat webview时设置为‘chrome61’，阻止转换rgba为#RGBA 16进制
sourcemap:false,
manifest:false, // 为true时生成json文件包含asset文件的hash版本和非hash的映射
minify:'esbuild', //压缩
write: true, // bundle 写入磁盘
emptyOutDir: true, // 如果输出路径再工作区内的话，每次build会清空路径下已存在的文件。
copyPublicDir: true, // 复制publicDir下文件到outDir
reportCompressedSize: true, // 是否报告gzip压缩的信息
chunkSizeWarningLimit:500, // chunk过大的报警阈值，单位kbs
optimizeDeps: {
entries:[],// vite默认会从所有html文件去收集依赖用于预构建，如果指定build.rollupOptions.input，vite这些指定的入口收集
exclude: [],// 预构建排除的依赖
include: [], // 默认的不在node_modules 下的关联的包不会参与预构建，
esbuildOptions:{
external:[],
plugins:[]
},
force:true,// 开启依赖预构建，忽略之前缓存的依赖
}
},
// 注入js中的全局变量
define:{
__ENV__:JSON.stringify(process.env.NODE_ENV),// 可以直接访问process.env
__APP_VERSION__ : JSON.stringify(customEnv.__APP_VERSION__), // 也可以取自定义env文件中的变量
}
};
console.log('command: ',command);// 开发模式会是为serve，vite build 后command为build
// 可以根据command返回不同的config，build指令下即使server存在也不影响
if(command ==='build'){
return {...baseConfig};
}else{
return {...baseConfig};
}
});
