🧭 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

1. 如果还是爆红可以重启编辑器。（Ctrl + shift + P 输入 reload）
2. 如果还是爆红请添加文件解析。

# 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.*",
  ],
}

这样就不会爆红了