vue-cli 项目配置多环境

最新推荐文章于 2024-10-11 10:36:40 发布

Android开发者小P

最新推荐文章于 2024-10-11 10:36:40 发布

阅读量2.5k

点赞数 1

分类专栏：前端文章标签：前端 vue

本文链接：https://blog.csdn.net/li420520/article/details/83513853

版权

本文介绍了如何在 Vue CLI 项目中配置多环境，包括生产环境和测试环境。通过安装 cross-env 和修改 webpack 配置，实现了根据环境变量动态加载不同环境的 .env 文件。在生产环境中使用 'npm run build:prod' 进行打包，测试环境则使用 'npm run build:sit'。打包后的文件将放在 dist 目录下，入口文件为 index.html，资源路径设定为 '/static'。

摘要由CSDN通过智能技术生成

vue-cli 项目配置多环境

vue-cli 默认只提供了 dev 和 prod 两种环境。但其实正真的开发流程可能还会多一个 sit 或者 stage 环境，

就是所谓的测试环境和预发布环境。所以我们就要简单的修改一下代码。其实很简单就是设置不同的环境变量

详细操作过程

1.在 package.json 中添加 test 命令

"scripts": {
    "dev": "cross-env NODE_ENV=online node build/dev-server.js --host 192.168.1.8",
    "local": "cross-env NODE_ENV=local node build/dev-server.js",
    "build": "node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js"
  },        前端交流；582735936
2.创建环境文件 (BASE_API 为接口的主地址)

	/config/dev.env.js (开发环境)

module.exports = {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  BASE_API: '"http://192.168.1.7"' // 这里是后端和后端做开发测试
}
	/config/sit.env.js (测试环境,测试服)

module.exports = {
  NOD

最低0.47元/天解锁文章