Vue2配置环境变量的注意事项

在实际开发中时常会遇到需要开发环境与生产环境中一些参数的替换,为了方便线上线下环境变量切换可以利用node中的process进行环境变量管理

实现步骤如下:

1.在 根目录 新增环境文件 .env.development 和 .env.production 注意文件名称保持一致( 需要强调的是文件中的变量名切记 必须 VUE_APP_ 开头)

# 在开发环境和生产环境中按实际情况加入变量
VUE_APP_BASE_URL=http://*****
VUE_APP_SOCKET_URL=ws://******

2.使用方法:
在需要替换的变量处使用 process.env.VUE_APP_BASE_URL 进行替换即可

使用:

yarn serve 

会默认使用 .env.development 中的环境变量

使用:

yarn build

会默认将 .env.production 文件中的环境变量打包

自定义环境变量文件如何使用?
新建环境变量文件 .env.xxtest 并写入对应的变量

# 在开发环境和生产环境中按实际情况加入变量
VUE_APP_BASE_URL=http://*****
VUE_APP_SOCKET_URL=ws://******

在package.json中加入对应的脚本命令

"test": "vue-cli-service serve --mode xxtest"

添加完成后如下所示:

  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build" ,
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service serve --mode xxtest"
  },

其中 –model 后的 xxtest 为自定义的环境变量文件名 test为命令名称
可以在终端使用下列命令启动将会使用该环境文件中的变量

yarn test

至此完成了配置和启动