vue-cli脚手架通过环境变量与模式 简单实现基地址设置

为什么需要配置环境变量和模式呢?

在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境,然后才能正式的发布。对应每一个环境可能都会有所差异,比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方便我们管理。比如在开发阶段npm run serve和生成阶段npm run build我们获取的基地址就不一样。

环境变量

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

在文件中,我们只需要以key=value的方式就可以设置变量了。例如:

FOO=bar
VUE_APP_SECRET=secret

模式是Vue CLI项目中的一个重要概念。默认情况下,Vue CLI项目中有三种模式:

  1. development:在vue-cli-service serve下,即开发环境使用
  2. production:在vue-cli-service build 和vue-cli-service test:e2e下,即正式环境使用
  3. test: 在vue-cli-service test:unit下使用

设置基地址步骤详情

首先在项目根目录(非src),创建两个文件分别是:.env.development(放开发阶段基地址)和.env.production(生产阶段基地址),然后在这两个文件中,分别写好对应的键值对,键名要以VUE_APP_开头,参考代码:

在.env.development文件中写入

# 开发阶段基地址
VUE_APP_BASEURL=http://127.0.0.1/caoye/public

在.env.production文件中写入

# 生产阶段基地址
VUE_APP_BASEURL=http://XXXXXX/caoye/public

在需要的地方使用process.env.VUE_APP_BASEURL即可

这里要注意的是更改了配置文件,必须重新运行项目才会生效

© 版权声明
THE END
喜欢就支持以下吧
点赞0赞赏
分享
评论 抢沙发