Vite 学习笔记（二）

vite 配置文件处理细节

1
2
3
4
5
6

// vite.config.js
export default {
    optimizeDeps: {
        exclude: []
    }
}

编辑 vite 配置文件时，有的编辑器默认会有语法提示，如果没有，则可以：

1. 找相关的插件

2. 通过引入 defineConfig 方法

   1 2 3 4 5 6 7 8

   // vite.config.js import { defineConfig } from 'vite' export default defineConfig({ optimizeDeps: { exclude: [] } })

   由于 vite 是由 TypeScript 编写的，defineConfig 的参数类型是设定好的，只要编辑器支持 TypeScript，则编写配置的时候也会有语法提示。

3. 通过 jsdoc 指定类型从而获得语法提示

   1 2 3 4 5 6 7

   // vite.config.js /** @type import('vite').UserConfig */ const viteConfig = { optimizeDeps: { exclude: [] } }

环境配置

使用 webpack 的时候，有时要在不同的文件中分别写不同环境的配置：

• webpack.dev.config
• webpack.prod.config
• webpack.base.config

而在 vite 的配置文件里可以这样写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// vite.config.js
import { defineConfig } from 'vite'
import ViteBaseConfig from './vite.base.config.js'
import ViteDevConfig from './vite.dev.config.js'
import ViteProdConfig from './vite.prod.config.js'

// 策略模式
const envResolver = {
    "build": () => Object.assign({}, viteBaseConfig, viteProdConfig),
    "serve": () => Object.assign({}, viteBaseConfig, viteDevConfig)
}

export default defineConfig(({ command }) => {
    return envResolver[command]()
})