【开发经验记录】vue的环境变量使用

86 阅读2分钟
业务场景:

前端开发过程中有一些判断需要再打包构建完毕后就进行,比如给现场打一个包,这个包不显示登录页、头部、菜单,用于各种环境不同需求的展示

方案一:

npm环境变量:npm本身并不直接使用环境变量,但它是Node.js的一部分,你可以在命令行中设置环境变量,这些变量可以在npm脚本和Node.js代码中使用,在命令行中设置环境变量的方法取决于你的操作系统。

Vue 应用常使用 Webpack 打包,而 Webpack 支持通过环境变量来定制构建过程。VUE_APP_ 开头的变量会被 Vue CLI 自动识别并在构建时注入到客户端,方便在应用运行时访问这些配置信息,简单来说就是你想在页面里使用环境变量就得存在Vue的环境变量中才能引用到。

打包时直接在npm run 里增加命令行:

npm会自动拼接成npm_config_env_NO_TMP
npm run build --env.NO_TMP=true`vue.config.js`里存储到Vue的环境变量中
process.env.VUE_APP_NO_TMP = process.env.npm_config_env_NO_TMP
页面中直接使用即可
if(process.env.VUE_APP_NO_TMP){*****}
方案二:

Vue的环境变量:Vue CLI项目中,你可以在项目根目录下的.env文件中设置环境变量。例如,你可以创建一个.env.development文件来设置开发环境的变量,创建一个.env.production文件来设置生产环境的变量。Vue CLI会根据启动命令自动加载相对应的环境配置文件。例如,当你执行npm run serve命令时,Vue CLI会自动加载.env.development文件。

.env.development 示例:

VUE_APP_API_URL = https://dev.example.com

.env.production 示例:

VUE_APP_API_URL = https://prod.example.com

当然你可能想要自己定义一套环境变量,又只想在特殊环境使用这些变量那么你可以在项目根目录下创建一个.env.test文件来设置自定义的变量

.env.test 示例:

VUE_APP_TMP = true

npm的调用方式:

"scripts": {  
"serve": "vue-cli-service serve", // 默认开发环境  
"build": "vue-cli-service build", // 默认生产环境  
"build:test": "vue-cli-service build --mode test" // 自定义测试环境  
}