JavaScript Vite define 怎么注入常量-js教程-PHP中文网

在 vite 项目中注入全局常量，最标准且推荐的做法是使用 defineconfig 中的 define 选项。该配置项会将指定的键值对作为全局变量直接替换到代码中，从而避免运行时开销并支持 tree shaking。使用时只需在 vite.config.js 中定义对象，vite 会在构建时自动将源码中的对应标识符替换为提供的字面量值。

JavaScript Vite define 怎么注入常量

`define` 配置的具体用法是什么

要使用此功能，需要在配置文件中使用 import { defineConfig } from 'vite' 引入函数，并在导出的配置对象中添加 define 字段。该字段的值是一个映射表，键名即为代码中引用的变量名，值为对应的 JavaScript 字面量。例如，若希望在全局暴露一个名为 VITE_APP_TITLE 的常量，只需将其设为字符串即可。Vite 会确保这些值在编译阶段被硬编码进最终的输出文件中，因此不需要在 HTML 或 JS 中手动挂载到 window 上。

JavaScript Vite define 怎么注入常量

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify('1.0.0'),
    __DEBUG_MODE__: true,
    API_BASE_URL: JSON.stringify('https://api.example.com')
  }
})

上述配置展示了三种常见类型的注入：字符串、布尔值和 URL。注意对于字符串类型，必须使用 JSON.stringify() 进行包裹，否则 Vite 会尝试将其作为代码片段解析，导致语法错误。而布尔值和数字可以直接赋值。在业务代码中，你可以像使用普通常量一样直接使用这些名称，无需导入。

如何验证常量是否成功注入

验证注入是否生效的最直接方式是检查构建后的产物或在浏览器控制台中查看全局变量。由于 define 是编译时替换，运行时的 window 对象中并不会出现这些变量，除非你在代码中显式地将它们赋值给 window。更可靠的方法是查看打包后的 JS 文件内容，确认源码中的变量名已被替换为具体的值。此外，可以通过 console.log 打印这些变量来观察其实际类型和值，确保替换符合预期。

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

JavaScript Vite define 怎么注入常量

// main.js
console.log(__APP_VERSION__); // 输出: "1.0.0"
console.log(typeof __APP_VERSION__); // 输出: string
console.log(__DEBUG_MODE__); // 输出: true
console.log(API_BASE_URL); // 输出: https://api.example.com

运行上述代码后，控制台将显示替换后的具体值。如果配置正确，__APP_VERSION__ 将被替换为带引号的字符串，__DEBUG_MODE__ 变为布尔值 true，而 API_BASE_URL 则变为裸字符串。这种替换发生在 AST（抽象语法树）层面，因此不会影响代码的逻辑结构，但能显著提升性能，因为浏览器无需再查找全局作用域中的变量。

当常量值为复杂对象时会发生什么

如果尝试注入一个复杂的 JavaScript 对象而非简单的字面量，define 的行为可能会超出预期。虽然 Vite 允许注入任何可序列化的值，但对于非原始类型，通常建议使用 JSON.stringify() 将其转为字符串，然后在代码中通过 JSON.parse() 还原。如果直接注入对象字面量，Vite 会将其原样嵌入代码，这可能导致作用域问题或意外的引用行为。例如，注入一个包含函数的对象会导致该函数在编译时被内联，可能引发闭包陷阱或体积膨胀。

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    CONFIG_DATA: JSON.stringify({
      theme: 'dark',
      features: ['login', 'dashboard']
    })
  }
})

在上述示例中，CONFIG_DATA 被注入为一个 JSON 字符串。在业务代码中使用时，需要调用 JSON.parse(CONFIG_DATA) 来获取实际的配置对象。这种方式确保了配置的不可变性，并且可以在构建时根据环境变量动态生成不同的配置内容。需要注意的是，每次修改 define 中的值都需要重新启动开发服务器，因为 Vite 不会热更新编译时的常量替换。