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

问题

实际开发中，开发环境和生产环境中一些变量是不同的，比如接口地址等等，打包之前需要手动切换。

编译时

新建env.js

let baseUrl = '';
if(process.env.NODE_ENV == 'production'){
  baseUrl = 'https://xxxxxxxxx';
} else if (process.env.NODE_ENV == 'development') {
 baseUrl = '/api'
}

export {
  baseUrl
}

process.env.NODE_ENV 是通过webpack 内置的 DefinePlugin为所有的依赖定义的变量

webpack.dev.conf.js

new webpack.DefinePlugin({
   'process.env.NODE_ENV': 'development'
  }),

webpack.prod.conf.js

new webpack.DefinePlugin({
   'process.env.NODE_ENV': 'production'
  }),

这样在项目任意文件中都能调用process.env.NODE_ENV变量，本人测试过，process并不是挂载在window变量上，猜测可能是挂载到了node的process变量。

在运行脚本编译项目的时候，会根据变量值的不同，设置不同的baseUrl。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli配置环境变量的方法

    vue-cli配置环境变量的方法

    在实际项目开发中,经常会碰到需要环境变量的情景,在vue-cli的环境下,默认已经配置了一个NODE_ENV的环境变量,当npm run dev的时候这个是development, 当npm run build 的时候这个是production.用过vue-cli开发的通常对这个都不陌生,用这个最多的基本就是我们配置ajax请求的域名头了, if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://

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

    问题 实际开发中,开发环境和生产环境中一些变量是不同的,比如接口地址等等,打包之前需要手动切换. 编译时 新建env.js let baseUrl = ''; if(process.env.NODE_ENV == 'production'){ baseUrl = 'https://xxxxxxxxx'; } else if (process.env.NODE_ENV == 'development') { baseUrl = '/api' } export { baseUrl } process

  • 详解Java环境变量配置方法(Windows）

    详解Java环境变量配置方法(Windows）

    我们知道,编写一个Java程序后,如果想让自己编写的代码可以正常运行,我们便需要对它进行编译和运行,而Java环境变量的配置就显得尤为重要,本篇文章,我们来谈一谈关于Java环境变量配置的一些方法. 方法一: 1.右击"我的电脑"-->选择"属性"-->选择"高级系统设置"-->选择"环境变量".这时,会打开这样一个窗口: 2. 我们在系统变量中点击"新建",会弹出这样一个窗口: 3.我们

  • maven环境变量配置以及失败原因解析

    本文为大家分享了maven环境变量配置的具体方法,供大家参考,具体内容如下 一.maven环境配置 1.解压apache-maven-x.x.x-bin.zip,最好不要解压到C盘 2.配置环境变量,右击"我的电脑"--"属性"--"高级系统设置"--"环境变量","系统变量"--"新建" 填写maven安装目录: 变量名:MAVEN_HOME 变量值:D:\apache-maven\a

  • Vue多环境代理配置方法思路详解

    背景: 多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了. 第一,很容易引起冲突. 第二,很容易出现代理错误,需要排查.而且现在微服务盛行,在生产环境下有网关配置,不会出错,但是在本地调试会造成麻烦,如修改了代理地址需要同步修改代理中的地址,很麻烦也很容易出错. 解决思路: 1.开发中定义常量js文件,例如constants.js.用户存放各个服务需要代理的服务名. let api = "" let loginServer = &q

  • Node.js安装、环境变量配置、报错解决方法

    Node.js安装、环境变量配置、报错解决方法

    目录 1.下载Node.js 2.安装Node.js 3.验证Node.js 4.Node.js环境配置 5. Node.js测试 6. 补充 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台. Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好. 1.下载Node.js 下载地

  • thinkPHP5.0框架环境变量配置方法

    本文实例讲述了thinkPHP5.0框架环境变量配置方法.分享给大家供大家参考,具体如下: 允许使用环境变量配置,并且优先级别比在配置文件中要高,因为在读取配置参数的时候,首先会判断环境变量中是否存在该配置. 在开发过程中,可以在应用根目录下面的.env来模拟环境变量配置,.env文件中的配置参数定义格式采用ini方式,例如: app_debug = true app_trace = true 如果你的部署环境单独配置了环境变量,那么请删除.env配置文件,避免冲突. 环境变量配置的参数会全部转

  • linux下配置jdk环境变量的三种方法总结

    一.修改/etc/profile文件当本机仅仅作为开发使用时推荐使用这种方法,因为此种配置时所有用户的shell都有权使用这些环境变量,可能会给系统带来安全性问题.用文本编辑器打开/etc/profile,在profile文件末尾加入:JAVA_HOME=/usr/share/jdk1.5.0_05 PATH=$JAVA_HOME/bin:$PATH CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar export JAVA_HO

  • ubuntu 下JDK环境变量配置方法

    检查jdk版本.卸载openjdk版本(jdk与openjdk的区别不在此赘述) 先检查java –version.javac –version命令查看版本(如图一) 经检查jdk版本为1.7.0.45:再输入rpm -qa|grep java查看(如图二) 注:不同的CentOS版本安装的openjdk版本可能有差别:如果没有列表显示,可直接看第4步 卸载以上三个文件(需要root权限,登录root权限卸载)(如图三) rpm -e --nodeps java-1.7.0-openjdk-1.

  • Linux下环境变量配置方法小结（.bash_profile和.bashrc的区别）

    在linux系统下,如果下载并安装了应用程序,在启动时很有可能在键入它的名称时出现"command not found"的提示内容.如果每次都到安装目标文件夹内,找到可执行文件 来进行操作就太繁琐了,这种情况下就涉及到环境变量PATH的设置问题,而PATH的设置也是在linux下定制环境变量的一个组成部分. 环境变量配置的两个方法: 1)修改/etc/profile文件 推荐使用这种方法,因为所有用户的shell都有权使用这些环境变量,缺点是可能会给系统带来安全性问题. 这里是针对所有

  • Linux环境变量配置的完整攻略

    Linux环境变量配置 在自定义安装软件的时候,经常需要配置环境变量,下面列举出各种对环境变量的配置方法. 下面所有例子的环境说明如下: 系统:Ubuntu 14.0 用户名:uusama 需要配置MySQL环境变量路径:/home/uusama/mysql/bin Linux读取环境变量 读取环境变量的方法: export命令显示当前系统定义的所有环境变量 echo $PATH命令输出当前的PATH环境变量的值 这两个命令执行的效果如下 uusama@ubuntu:~$ export decl

随机推荐