vue cli3.0打包上线不同环境

vue cli3.0打包上线不同环境

1. cli3.0支持".env"文件配置，在项目的根目录下配置".env"文件，根据不同的环境命名不同的文件名称，如： 测试上线环境的.env文件命名为".env.release"，文件内容如下：

NODE_ENV = 'production'   
VUE_APP_TITLE = 'release'

可以直接定义NODE_ENV = ‘release’ ，但是打包出来dist的文件和NODE_ENV = ‘production’ 生产环境的文件有区别，所有还是将NODE_ENV定义为production，代表生产环境，再在生产环境的基础上区分不同的线上环境，这样打包出来的文件没有区别的。dist文件具体不同如下图所示：


2. 在package.json的文件中给scripts对象添加属性，如下代码：

 "release": "vue-cli-service build --mode release",

3. 判断地址使用：

//线上测试环境
if(process.env.VUE_APP_TITLE === 'release') {
	//线上测试环境的执行代码
    nameOld = '释放'
}

4. 执行打包生成dist文件（run候面跟的名称是第2步在package.json的文件中给scripts对象添加的属性名称）：

npm run release

好了，完成不同环境的打包结束了