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

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

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

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

  1. 首先,确保您已在项目中安装了 cross-env 包。如果没有安装,请运行以下命令:
npm install cross-env --save-dev
  1. 打开 package.json 文件。
  2. 在 “scripts” 字段中找到 “build” 命令。
  3. 在 “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` 环境变量。
```

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-05 11:42:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-05 11:42:01       101 阅读
  3. 在Django里面运行非项目文件

    2024-01-05 11:42:01       82 阅读
  4. Python语言-面向对象

    2024-01-05 11:42:01       91 阅读

热门阅读

  1. LeetCode每日一题.08(162.寻找峰值)

    2024-01-05 11:42:01       50 阅读
  2. 力扣:209. 长度最小的子数组(Python3)

    2024-01-05 11:42:01       54 阅读
  3. 力扣122. 买卖股票的最佳时机 II

    2024-01-05 11:42:01       58 阅读
  4. Leetcode12-统一一致字符串的数目(1684)

    2024-01-05 11:42:01       57 阅读
  5. 力扣第一百道题,记录一下——x 的平方根

    2024-01-05 11:42:01       53 阅读
  6. 爬虫案列 --抖音视频批量爬取

    2024-01-05 11:42:01       38 阅读
  7. CentOS快速安装Mysql5.7(Alibaba Cloud Linux兼容)

    2024-01-05 11:42:01       61 阅读
  8. 观察黄绿豆两则

    2024-01-05 11:42:01       58 阅读
  9. C++ 学习系列 -- using关键字

    2024-01-05 11:42:01       56 阅读
  10. Linux搭建MQTT服务器(mosquitto)并使用

    2024-01-05 11:42:01       59 阅读
  11. 测试在软件开发中存在的意义

    2024-01-05 11:42:01       58 阅读
  12. 2023新年总结与展望

    2024-01-05 11:42:01       48 阅读
  13. Rust 常用的第三方库

    2024-01-05 11:42:01       81 阅读
  14. Rust-使用Serde对json数据进行反序列化

    2024-01-05 11:42:01       66 阅读