在实际开发中时常会遇到需要开发环境与生产环境中一些参数的替换,为了方便线上线下环境变量切换可以利用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中加入对应的脚本命令
javascript">"test": "vue-cli-service serve --mode xxtest"
添加完成后如下所示:
javascript"> "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
至此完成了配置和启动
