Vue环境变量配置与使用

原创已于 2024-12-05 17:56:18 修改 · 502 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-07-20 17:39:36 首次发布

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

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

一. 配置环境变量

变量必须以 VUE_APP_ 开头, 才能被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。如VUE_APP_XXX ;
不同的环境变量配置

 // .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"
},

只要修改了webpack相关的东西就得重新打包才能生效

二. 使用环境变量

js 中用 process.env.{环境变量名}，如 process.env.VUE_APP_UR。
html 采用模板引用指令<%= process.env.process.env.{环境变量名} %>，比如：

 <script src="xxx.com" app_id="<%= process.env.process.env.VUE_APP_URL %>"/>

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