脚本宝典收集整理的这篇文章主要介绍了Vue配置多环境变量,原来是这么回事啊,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目录
1.为什么配环境变量
2.根目录下创建以下形式的文件进行不同环境下变量的配置:
如何使用:
3.环境变量的默认值和自己添加环境变量
打包环境
这是解释篇,如果要看直接使用,则跳转 这里
在实际项目的开发中,我们一般会经历项目的开发阶段、测试阶段和最终上线阶段,每一个阶段对于项目代码的要求,和基地址可能都不尽相同,所以就引出了环境变量,动态识别我们的环境,在不同的生产环境下可以使用相应的配置变量
一般一个项目都会有以下 3 种环境:
就以打包发布生产为例子,每次使用开发环境的接口调试完,打包的时候总要找到请求文件,去更改为线上地址然后打包,这样处理起来就会很麻烦
.env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 如 :production 和 development .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略
如何使用:
创建一个名为 .env.stage 的文件,该文件表明其只在 stage 环境下被加载,在这个文件中,我们可以配置如下键值对的变量:
NODE_ENV=stage VUE_APP_TITLE=stage mode
在项目中,我们该如何使用该配置的变量值?很简单,使用 process.env.[name] 进行访问就可以了,比如: // vue.config.js console.log(process.env.NODE_ENV); // development(在终端输出)
这里输出‘development’ 其实我们期望输出的是‘stage’,原因是 vue-cli-service serve 命令默认设置的环境是 development 我们希望输出为stage 就需要对package.json 中的 serve 脚本的命令进行修改
"scripts": { "serve": "vue-cli-service serve --mode stage", }
--mode stage 其实就是修改了 webpack 4 中的 mode 配置项为 stage, 同时其会读取对应 .env.stage 文件下的配置,如果没找到对应配置文件,其会使用默认环境 development,同样 vue-cli-service build 会使用默认环境 production。 但这时候如果你创建一个 .env 的文件,再次配置重复的变量,但是值不同,如:NODE_ENV=staging VUE_APP_TITLE=staging mode VUE_APP_NAME=project 因为 .env 文件会被所有环境加载,即公共配置,那么最终我们运行 vue-cli-service serve 打印出来的stage,但是如果是 .env.stage.local 文件中配置成上方这样,打印出来的是 staging, 所以 .env.[mode].local 会覆盖 .env.[mode] 下的相同配置。同理 .env.local 会覆盖 .env 下的相同配置。 由此可以得出结论,相同配置项的权重:
.env.[mode].local > .env.[mode] > .env.local > .env
- 在main.js打印console.log(process.env);
- 会得到两个默认变量分别是 BASE_URL: "" 和 NODE_ENV: "development",
- NODE_ENV:""可以用来区分环境 是开发 还是测试 还是正式环境
- 如下图
1 . 如果想要自己定义添加环境变量需要,在根目录下新建.env文件
以VUE_APP开头,例如:VUE_APP_MY_NAME="活在风浪" ,注意需要重新启动服务!
1 执行 npm run build 需要在vue.config.js配置publicPath:'./'保证输出目录正确
详见我的这个博客点击
2 打包命令运行后NODE_ENV变成了production
由此可以得到NODE_ENV可以得到我们请求的基地址
在src目录下新建一个config文件夹里面有一个index.js内容是:
更新中...
以上是脚本宝典为你收集整理的Vue配置多环境变量,原来是这么回事啊全部内容,希望文章能够帮你解决Vue配置多环境变量,原来是这么回事啊所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。