vue中如何添加自定义环境变量 ，process.env取值报错undefined

Posted 2021-07-24 铁锤妹妹@

一. 前言

1. 我们在做vue单页应用的时候,会发现配置文件里有procsss.env字段
2. 如果手动修改代码中加载配置文件的路径也可以，但是太麻烦，最重要的是很low
3. 依靠环境变量,标记服务器,这样就可以根据不同的环境,配置不同环境下我们所需要的东西。
   例如：后端接口的域名。

二. process.env(环境变量)

console.log(process.env)；// 可以自己打印试试
process.env属性会返回包含用户环境的对象。通俗来讲，该属性可以返回项目运行环境的信息。

三. 配置环境变量

1. 只有以 VUE_APP_开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。因此我们创建自定义环境变量的时候都以 VUE_APP_开头这样的形式，比如VUE_APP_XXX
2. 只要修改了webpack相关的东西就得重新打包 npm run serve 才能生效

四. 环境变量使用

1. 在js文件或者在vue文件中process.env.{环境变量名}，比如上文定义的VUE_APP_URL，使用process.env.VUE_APP_URL即可获取环境变量的值。
2. 在html文件中使用环境变量，采用模板引用指令<%= process.env.process.env.{环境变量名} %>，比如：

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

五. 关于文件的加载

根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的，比如执行npm run serve命令，会自动加载.env.development文件，在需要用到的vue单页面中添加下面测试代码打印一下 console.log(process.env.VUE_APP_URL);

六. process.env.VUE_APP_URL报错undefined

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