vue环境变量配置打包（本地、测试、生产）

vue环境变量配置打包（本地、测试、生产）

在vue环境配置完毕的前提下进行

1、在vue项目中创建三个文件，本地、测试和生产文件

2、在每个文件写入对应的内容

prod文件

NODE_ENV = 'prod'
VUE_BASE_URL = 'https://www.paulara.com/'

dev文件

NODE_ENV = 'dev'
VUE_BASE_URL = 'https://www.paulara.com/dev'

local文件

NODE_ENV = 'local'
VUE_BASE_URL = 'http://192.168.x.x:60001/'

3、配置package.json（打包命令）

"private": true,
  "scripts": {
    "local": "vue-cli-service serve --mode local",
    "dev": "vue-cli-service serve --mode dev",
    "prod": "vue-cli-service serve --mode prod",
    "build-local": "vue-cli-service build --mode local --report",
    "build-dev": "vue-cli-service build --mode dev",
    "build-prod": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  },

4、也可以在vue.config.js设置你需要的配置

console.log('当前运行环境：' , process.env.NODE_ENV) //打印当前环境

5、在接口封装处加入接口地址

console.log('当前接口地址：' , process.env.VUE_BASE_URL ) //打印当前接口

配置完成，然后就可以通过npm run dev 、 npm run serve 、 npm run local启动项目