正规网站建设平台,梅州新农村建设网站,wordpress全景插件,果洛州wap网站建设公司vue项目使用.env文件配置全局环境变量
模式是 Vue CLI 项目中一个重要的概念。默认情况下#xff0c;一个 Vue CLI 项目有三个模式#xff1a;
development 模式用于 vue-cli-service serve production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e test 模…vue项目使用.env文件配置全局环境变量
模式是 Vue CLI 项目中一个重要的概念。默认情况下一个 Vue CLI 项目有三个模式
development 模式用于 vue-cli-service serve production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e test 模式用于 vue-cli-service test:unit
1.在项目根目录中创建.env 或者 .env.xxx 的文件来指定环境变量
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入但会被 git 忽略.env.dev # 指定开发模式dev.env.prod # 指定生产模式prod.env.test # 指定测试模式test注以.local结束的文件会被忽略是因为忽略文件.gitignore文件设置了
.env.local
.env.*.local2.环境文件的优先级
为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
不会被 .env 文件覆写。
3.一个环境文件只包含环境变量的“键值”对
例如.env.test文件的配置可如下
# 环境
NODE_ENV test
# 接口地址
VUE_APP_BASE_API /api
# 打包文件名
VUE_APP_DIR_NAME test4.模式
1模式与环境变量是和关系
模式 环境变量
一个模式可以包含多个环境变量
2模式如何添加呢
.env 文件增加后缀来设置某个模式
如.env.test文件的后缀名是test,即为test模式 。 test模式下含有NODE_ENV VUE_APP_BASE_API VUE_APP_DIR_NAME 这3个环境变量如有需要可自行添加其他环境变量
5.使用
1构建命令中使用开发环境变量
通过传递 --mode 选项参数为命令行覆写默认的模式。
scripts: {serve: vue-cli-service serve,build: vue-cli-service build --mode build,dev: vue-cli-service serve --mode dev, test: vue-cli-service build --mode test },注–mode 后面跟的名字一定要跟 .env.xxx 的名字对应起来才能实现不同的命令用不同的配置文件
2客户端代码中使用
const instance axios.create();// instance.defaults.baseURL baseurl;
instance.defaults.baseURL process.env.VUE_APP_BASE_API;
instance.defaults.timeout 2000;//设置打包后的目录名
outputDir:process.env.VUE_APP_DIR_NAME,
