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

Posted 铁锤妹妹@

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中如何添加自定义环境变量 ,process.env取值报错undefined相关的知识,希望对你有一定的参考价值。

一. 前言

  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 才能生效

以上是关于vue中如何添加自定义环境变量 ,process.env取值报错undefined的主要内容,如果未能解决你的问题,请参考以下文章

vue 全局环境变量配置和自定义全局变量

vue如何按照环境打包项目?如何在vue文件中使用process.env?

Jenkins 自定义环境变量

vue全局环境变量

vue项目环境变量配置的实现方法

vue-cli如何添加多种环境变量