Vue配置多环境打包项目部署

690 阅读1分钟

项目开发到上线的过程中需要经过不同环境的测试和验证最后才能部署到生产环境给用户使用,在这一过程中我们需要针对不同环境来配置不同的接口路径,手动去修改比较繁琐而且容易出错,但是我们可以采用多环境配置来解决这个问题。

  1. package.jsonscripts节点添加自己自定义的模式,--mode后面的名字是自定义的,具体要增加什么环境根据自己的需求来。
"build:dev": "vue-cli-service build --mode development",
"build": "vue-cli-service build --mode production"
  1. 在项目的根目录新建以下文件,其中有些文件是得以--mode后面的命名来结尾的
新建.env
新建.env.development
新建.env.production
  1. 配置内容
.env文件
NODE_ENV = "development"

.env.development文件
NODE_ENV = "development"

.env.production文件
NODE_ENV = "production"
  1. 如何使用
//在需要使用的地方通过process.env.NODE_ENV来判断是那个环境做不同的配置即可
  1. 命令
根据当前的配置执行下面的命令
npm run build:dev   //打的是测试环境
npm run build       //打的是生产环境