🧭 define 说明
- 类型： Record<string, any>
定义全局常量替换方式。其中每项在开发环境下会被定义在全局，而在构建时被静态替换。
Vite 使用 esbuild define 来进行替换，因此值的表达式必须是一个包含 JSON 可序列化值（null、boolean、number、string、array 或 object）或单一标识符的字符串。对于非字符串值，Vite 将自动使用 JSON.stringify 将其转换为字符串。
示例
export default defineConfig({
define: {
__APP_VERSION__: JSON.stringify('v1.0.0'),
__API_URL__: 'window.__backend_api_url',
},
})
NOTE
对于使用 TypeScript 的开发者来说，请确保在 env.d.ts 或 vite-env.d.ts 文件中添加类型声明，以获得类型检查以及代码提示。
示例：
// vite-env.d.ts
declare const __APP_VERSION__: string
🧭 场景一
定义了全局常量，控制台输出正常，但是受ts语法提示错误的警告。
🙋♂️ 问题说明
全局定义一个窗口的内部宽度：MY_GLOBAL_WIN
# vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '')
return {
define: {
__MY_GLOBAL_WIN__: 'window.innerWidth'
},
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
}
})
在App.vue中使用
<script setup lang="ts">
console.log(__MY_GLOBAL_WIN__)
</script>
直接爆红
输出没问题
ts语言检测提示：
找不到名称“MY_GLOBAL_WIN”。ts(2304)
🚀 解决方式
在 env.d.ts 或 vite-env.d.ts 文件中添加类型声明。
# vite-env.d.ts
declare const __MY_GLOBAL_WIN__: string
- 如果还是爆红可以重启编辑器。（Ctrl + shift + P 输入 reload）
- 如果还是爆红请添加文件解析。
# tsconfig.app.json
{
"include": ["vite-env.d.ts"],
}
🧭 场景二
如果全局常量定义的较多，这会污染 vite.config.ts 代码阅读，可以使用文件导入。
🙋♂️ 问题说明
全局常量过多，导致vite.config文件代码冗余
import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '')
return {
define: {
__APP_VERSION__: JSON.stringify('v1.0.0'),
// 定义一个全局配置
__MY_GLOBAL_CONFIG__: {
key: 'value',
nested: {
foo: 'bar'
}
},
__MY_GLOBAL_WIN__: 'window.innerWidth'
},
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
}
})
🚀 解决方式
改进后的代码
import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import globalConfig from './globalConfig'
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '')
return {
define: globalConfig,
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
}
})
# globalConfig.ts
export default {
__APP_VERSION__: JSON.stringify('v1.0.0'),
// 定义一个全局配置
__MY_GLOBAL_CONFIG__: {
key: 'value',
nested: {
foo: 'bar'
}
},
__MY_GLOBAL_WIN__: 'window.innerWidth'
}
按照以上方式你可能会遇到这种现象：
错误信息提示：
文件 “globalConfig.ts” 不在项目 “tsconfig.node.json” 的文件列表中。项目必须列出所有文件，或使用 “include” 模式。ts(6307)
按照错误提示，完成文件解析操作：
# tsconfig.node.json
{
"include": [
"globalConfig.*",
],
}
这样就不会爆红了
