Vue Cli2 环境变量配置

环境变量

主要用于区分 开发、测试、正式环境的
(1) 安装依赖：cnpm i -D cross-env或npm i -D cross-env
(2) 在package.json中的scripts新增修改为

//1、删除了start和build
//2、PATH_ENV 是可以自定义名称的，随意修改为你想要的
//3、npm run prod 不知道为啥一直是测试的，随即改为npm run dprod

  "scripts": {
    "dev": "cross-env PATH_ENV=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "preprod": "cross-env PATH_ENV=preprod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dprod": "cross-env PATH_ENV=prod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "btest": "cross-env PATH_ENV=test node build/build.js",
    "bpreprod": "cross-env PATH_ENV=preprod node build/build.js",
    "bprod": "cross-env PATH_ENV=prod node build/build.js"
  },

(3) 在config/prod.env.js里面编辑

'use strict'

let PATH_ENV = '"test"'
if (process.env.PATH_ENV === 'preprod'){
  PATH_ENV = '"preprod"'
}else if(process.env.PATH_ENV === 'prod'){
  PATH_ENV = '"prod"'
}
console.log(PATH_ENV)

module.exports = {
    NODE_ENV: '"production"',
    PATH_ENV
}

(4) 运行npm run btest，会打印

• npm run dev 代表在开发过程中运行测试环境的接口
• npm run preprod 代表在开发过程中运行预发布环境的接口
• npm run dprod 代表在开发过程中运行正式环境的接口
• npm run btest 代表打包运行测试环境
• npm run bpreprod 代表打包运行预发布环境
• npm run bprod 代表打包运行正式环境

(5) 在src/api文件下引入environment.js

/*
*   配置编译环境和线上环境之间的切换
*   baseUrl: 域名地址
*   routerModel: 路由模式
*   
*   
*/

var ShareUrl = "http://#######.test.cn/api/"; //测试

if (process.env.PATH_ENV === 'test'){
    baseUrl = "http://#######.test.cn/api/"; //测试 
   
  }else if (process.env.PATH_ENV === 'preprod'){
    baseUrl = "http://#######.yfb.cn/api/"; //预发布
   
  }else if(process.env.PATH_ENV === 'prod'){
    baseUrl = "http://#######.zs.cn/api/"; //正式
   
  }

export{
    ShareUrl
}

(6) 在src/api/api.js文件下引入environment.js即可
import { baseUrl } from '@/api/environment';