通过上一章节，我们知道了vite的默认配置文件是vite.config.js，最基础的配置文件是这样的：
export default { // 配置选项 };
也可以通过 --config 命令行选项指定一个配置文件： vite --config my-config.js
vite运行在node环境，为什么vite.config.js可以书写成esmodule的形式？
vite在读取这个vite.config.js的时候会率先node去解析文件语法, 如果发现你是esmodule规范会直接将你的esmodule规范进行替换变成commonjs规范
配置语法提示
我们在撰写配置时，默认是没有可用配置提示的，这对我们很不友好！（下图的提示并不是vite的可选配置提示，是插件对js的通用提示）
- webstorm有很好的语法补全功能，vscode没有
- 如果使用vscode或者其他的编辑器, 则需要做一些特殊处理
我们可以通过一些特殊配置，获得代码补全功能。
defineConfig
加上defineConfig，会惊奇的发现，配置项居然有代码提示了，真香！
jsdoc 注释法
jsDoc是一个用于JavaScript的API文档生成器，官网：https://jsdoc.zcopy.site/
将配置写在viteConfig内并导出，然后再其上面写如下注释：
/** @type import("vite").UserConfig */
环境模式配置
我们使用webpack时，基于不同的环境，可以设置不同的配置文件，如：webpack.dev.config、webpack.prod.config、webpack.base.config。
如果需要使用vite来基于不同环境设置不同配置，只需要导出这样一个函数：
export default defineConfig(({ command, mode, ssrBuild }) => { if (command === 'serve') { return { // dev 独有配置 } } else { // command === 'build' return { // build 独有配置 } } })
- 在开发环境下 command 的值为 serve
- 生产环境下为 command 的值为 build
多配置集成的一种实现方式
同webapack配置一样，我们也可以定义多个配置文件，然后再vite.config.js中引入使用
import { defineConfig } from "vite"; import viteBaseConfig from "./vite.base.config"; import viteDevConfig from "./vite.dev.config"; import viteProdConfig from "./vite.prod.config"; export default defineConfig(({ command, mode, ssrBuild }) => { if (command === "serve") { return { // dev 独有配置 viteBaseConfig, viteProdConfig }; } else { // command === 'build' return { // build 独有配置 viteBaseConfig, viteDevConfig }; } });
vite.base.config.js代码如下，其余类似。
import { defineConfig } from "vite"; export default defineConfig( { });
当然，我们可以使用策略模式让代码变得更加高级
import { defineConfig } from "vite"; import viteBaseConfig from "./vite.base.config"; import viteDevConfig from "./vite.dev.config"; import viteProdConfig from "./vite.prod.config"; const envResolver = { // build: () => ({...viteBaseConfig,... viteProdConfig}) 这种方式也可以 // Object.assign中的{}是为了防止viteBaseConfig被修改。 build: () => Object.assign({}, viteBaseConfig, viteProdConfig), serve: () => Object.assign({}, viteBaseConfig, viteDevConfig), }; export default defineConfig(({ command, mode, ssrBuild }) => { return envResolver[command](); });
Object.assign()
Object.assign() 方法将所有可枚举属性从一个或多个源对象复制到目标对象，返回修改后的对象。
注意：该方法会修改源对象！
const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target); // expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget === target); // expected output: true
环境模式测试
我们在vite.config.js中根据不同环境写下提示信息
import { defineConfig } from "vite"; import viteBaseConfig from "./vite.base.config"; import viteDevConfig from "./vite.dev.config"; import viteProdConfig from "./vite.prod.config"; const envResolver = { build: () => { console.log("生产模式"); Object.assign({}, viteBaseConfig, viteProdConfig) }, serve: () => { console.log("开发模式"); Object.assign({}, viteBaseConfig, viteDevConfig) }, }; export default defineConfig(({ command, mode, ssrBuild }) => { return envResolver[command](); });
package.json中增加"build": "vite build"
"scripts":jsx { "test": "echo \"Error: no test specified\" && exit 1", "dev": "vite", "build": "vite build" },
命令行执行 npm run dev
命令行执行 npm run build
