Vue环境变量配置与使用

文章讲述了在Vue.js项目中如何配置环境变量,特别是VUE_APP_开头的变量会被webpack嵌入。配置文件包括.env.development,.env.production,.env.test,通过vue-cli-service的不同模式进行加载。修改webpack配置后需重新打包生效。在JavaScript中,可以通过process.env访问环境变量,HTML中则使用模板语法引用。如果变量值未定义,可能是未重新打包导致。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一. 配置环境变量

  1. 变量必须以 VUE_APP_ 开头, 才能被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。如VUE_APP_XXX ;
  2. 不同的环境变量配置
 // .env.development / .env.production / .env.test  
 ENV = 'development' / 'production' / 'test'
 VUE_APP_IMG_URL = '/dlkjj_pc/static/img'
 
 // package.json  
 // --mode xxx 与 .env.xxx 名称对应
 // 根据启动命令加载 .env.xxx
"scripts": {
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "build:test": "vue-cli-service build --mode test"
},
  1. 只要修改了webpack相关的东西就得重新打包才能生效

二. 使用环境变量

  1. js 中用 process.env.{环境变量名},如 process.env.VUE_APP_UR。
  2. html 采用模板引用指令<%= process.env.process.env.{环境变量名} %>,比如:
 <script src="xxx.com" app_id="<%= process.env.process.env.VUE_APP_URL %>"/>

注:
若 process.env.VUE_APP_URL报错undefined, 则可能修改了环境变量而未重新打包

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值