Vue.js项目中如何在JSON文件内访问全局常量与.env环境变量

原生标准JSON是纯静态数据格式，不支持任何变量引用、代码执行逻辑，无法直接导入常量、也不能直接读取.env中的配置值。你尝试的几种写法都是JavaScript语法，放在纯JSON文件中会被解析器判定为非法格式，直接导致运行/测试失败。

根据项目场景选下面任意一种方案即可，都是Vue生态的常规用法：

• 方案1：将JSON文件改为JS/TS模块（成本最低、最常用）
  不需要保留纯JSON格式的场景下，直接把.json后缀改成.js/.ts，就可以在文件内正常引用环境变量、全局常量，导出的结构和原JSON完全一致，导入使用方式没有任何区别。
  示例代码（Vue CLI/Webpack环境）：

  // 原config.json改为config.js
  export default {
    href: process.env.SOME_EXTERNAL_LINK,
    title: "普通静态配置正常写即可",
    list: [1,2,3]
  }
  

  如果是Vite搭建的Vue项目，环境变量通过import.meta.env读取即可：

  export default {
    href: import.meta.env.VITE_SOME_EXTERNAL_LINK
  }
  

  使用时把原来的导入路径后缀改成对应.js/.ts就行，没有其他适配成本。

• 方案2：构建阶段占位符替换（需保留纯JSON文件时用）
  如果JSON文件需要给其他非JS系统复用、必须保留纯静态格式，可以在JSON里写自定义占位符，在Vue项目构建流程中加替换规则，打包/启动服务时自动把占位符替换成对应常量或环境变量值。
  示例JSON写法：

  {
    "href": "__SOME_EXTERNAL_LINK__",
    "otherConfig": "普通静态值"
  }
  

  对应配置逻辑：

  • Vue CLI/Webpack项目可以通过内置的DefinePlugin、或者自定义简单loader实现文本替换
  • Vite项目可以写一个极简的自定义插件，在文件转换阶段读取JSON内容，匹配占位符替换为env中的值
    注意：替换动作只在构建阶段执行，最终产出的JSON还是静态值，运行时不会动态变更。

• 方案3：加载JSON后动态赋值（替换字段少的时候适用）
  如果不想改动原有JSON文件，可以在JS逻辑中导入静态JSON后，手动覆盖需要动态赋值的字段：

  import rawConfig from './config.json'
  
  const config = {
    ...rawConfig,
    href: process.env.SOME_EXTERNAL_LINK // 覆盖为环境变量值
  }
  
  export default config
  

• process.env.SOME_EXTERNAL_LINK是JavaScript运行时的对象访问语法，JSON解析器只识别固定的6种数据类型（字符串、数字、布尔、数组、对象、null），遇到这类写法会直接报语法错误
• 模板字符串`${xxx}`、$(xxx)分别是JS模板语法、Shell变量语法，放在JSON里只会被当成普通字符串处理，不会触发执行逻辑

内容的提问来源于stack exchange，提问作者user3724786