vue 项目 打包或者本地运行时 通过package.json 修改 环境变量

很多时候项目分为多个环境 不同的api。 可以根据 vue-cli官方提供的 通过新增不同env文件 来配置不同的环境变量 之外也可以使用其他便捷的方式。

vue-cli 环境变量配置地址
vite 环境变量配置地址

在 Vue 项目的 package.json 文件中，您可以使用 cross-env 包来指定环境变量，以在构建过程中使用特定的配置。

1. 首先，确保您已在项目中安装了 cross-env 包。如果没有安装，请运行以下命令：

npm install cross-env --save-dev

2. 打开 package.json 文件。
3. 在 “scripts” 字段中找到 “build” 命令。
4. 在 “build” 命令中使用 cross-env 设置环境变量。例如：

"scripts": {
  "build": "cross-env NODE_ENV=production vue-cli-service build" 
  "build:development": "cross-env NODE_ENV=development vue-cli-service build"
}

在这个示例中，我们使用 cross-env 设置 NODE_ENV 环境变量为 production。
正式环境打包 npm run build
测试环境打包 npm run build:development

console.log(process.env.NODE_ENV) 能够获取到当前的环境变量

如果您有其他自定义的环境变量，可以按照相同的方式添加它们。例如：

"scripts": {
  "build": "cross-env NODE_ENV=production API_URL=https://api.example.com vue-cli-service build"
}
```

在这个示例中，我们设置了 `NODE_ENV` 环境变量为 `production`，以及一个自定义的 `API_URL` 环境变量。
```