5：Vite配置语法提示以及开发生产环境区分

vite配置语法提示

vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
    optimizeDeps: {
        exclude: ['lodash-es'] // 不进行依赖预构建
    }
})

/** @type {import('vite').UserConfig} */
const viteConfig = {
    optimizeDeps: {
        include: ['lodash-es']
    }
}

上面两种方法都是可以的。

区分环境

defineConfig 里面的回调函数可以解构出一个command参数

import { defineConfig } from 'vite'
import viteBaseConfig from './vite.base.config'
import viteDevConfig from './vite.dev.config'
import viteProdConfig from './vite.prod.config'

const envResolver = {
    serve: () => {
        console.log('开发环境')
        return { ...viteBaseConfig, ...viteDevConfig }
    },
    build: () => ({ ...viteBaseConfig, ...viteProdConfig })
}

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

根据环境变量的不同值区分不同的环境 做出对应的处理