vue环境变量配置——process.env（详细）

川长思鸟来 2022-10-11 13:49 376阅读 0赞

在用`vue`框架时，经常用到两种环境，一种是开发环境，就是本地开发时的环境，一种是生产环境，就是要发布到线上的环境。

平时开发是用生产环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。

下面开始：

## 配置环境的实现原理 ##

实现原理就是采用`node.js`顶层对象中的`process.env`（进程环境，返回一个包含用户环境信息的对象）属性，根据各个环境的配置文件区分和切换环境

## 具体实例 ##

#### 1. 安装依赖 ####

npm install process

#### 2.创建`.env.dev` 和`.env.prod`两个文件 ####

注意文件要创建在根目录下面

`.env.dev`文件内容如下：

NODE_ENV = 'development'
    VUE_APP_TITLE = 'development'
    /* 请求接口地址 */
    VUE_APP_INTERFACE_URL="https://xxx"
    /* proxy代理地址 */
    VUE_APP_PROXYURL='http://xxx'

`.env.prod`文件内容如下：

NODE_ENV='production'
    VUE_APP_TITLE='prod'
    /* 请求接口地址 */
    VUE_APP_INTERFACE="https://xxx"

#### 3.设置项目启动时默认的环境 ####

只需要在项目启动命令后面修改需要的环境就行了，例如`npm run dev`，把`--mode dev`改为`--mode prod`就变成了开发环境

`package.json`部分内容如下：

"scripts":{ 
    	"dev":"vue-cli-service serve --mode dev",
    	"prod":"vue-cli-service serve --mode prod"
    }

#### 4.查看环境是否配置成功 ####

在`main.js`文件中打印当前环境，输出就成功了  
`console.log(process.env.NODE_ENV)`

发表评论取消回复

表情：

评论列表（有 0 条评论，376人围观）

还没有评论，来说两句吧...

相关阅读

相关 maven环境变量配置（超详细！）

下载地址： [官网地址][Link 1] ![在这里插入图片描述][2e95e4e86c3e480496bd46d87fcfe65b.png] 建议不要下载在C盘

朴灿烈づ我的快乐病毒、/ 2024年04月06日 14:29/ 0 赞/ 76 阅读

相关 Python：环境变量配置方法详细教程

最近有人问我如何配置python环境变量，这篇文章就向大家介绍python环境变量配置方法。 > python环境变量的配置方法：首先鼠标右键此电脑，选择属性；然后点击高级系

我会带着你远行/ 2024年03月30日 16:36/ 0 赞/ 78 阅读

相关 vue4多环境变量配置

通过在 package.json 里的 scripts 配置项中添加–mode xxx 来选择不同环境只有以 VUE\_APP 开头的变量会被 webpack.Define

素颜马尾好姑娘i/ 2023年10月11日 14:26/ 0 赞/ 2 阅读

相关 MySQL环境变量的配置（详细教程）

一、问题：安装Mysql之后，打开DOS窗口，直接输入mysql的登录命令不被识别（mysql不是内部或外部命令，也不是可运行的程序或批处理文件） ![65115bf04b4

谁借莪１个温暖的怀抱￠/ 2023年09月27日 10:16/ 0 赞/ 122 阅读

相关 electron-vue项目配置开发环境变量

执行npm run dev 之后，项目是在开发环境下运行在开发环境下配置一些全局变量 1.先找到开发环境配置文件项目结构如图所示： ![1716250-201909

﹏ヽ暗。殇╰゛Y/ 2023年08月17日 17:30/ 0 赞/ 143 阅读

相关 vue环境变量配置——process.env（详细）

在用`vue`框架时，经常用到两种环境，一种是开发环境，就是本地开发时的环境，一种是生产环境，就是要发布到线上的环境。平时开发是用生产环境的，如果发布到线上时，需要切换环境

川长思鸟来/ 2022年10月11日 13:49/ 0 赞/ 377 阅读

相关 MySQL 环境变量的配置详细说明

调整MySQL运行参数，修改/etc/my.cnf文件调整mysql运行参数重启MySQL后生效，在MySQL4版本以后，一部分内部变量可以在MySQL运行时设置，不过重启My

今天药忘吃喽~/ 2022年10月02日 09:52/ 0 赞/ 176 阅读

相关 linux配置java环境变量(详细)

linux配置java环境变量(详细) 一. 解压安装jdk 在shell终端下进入jdk-6u14-linux-i586.bin文件所在目录，执行命令 ./jd

古城微笑少年丶/ 2022年06月17日 12:53/ 0 赞/ 244 阅读

相关 Postman配置全局变量与环境变量详细教程

> 前言在Postman的使用过程种，我们常常遇到就是参数的传递与共享，如何减少不必要的参数的复制与黏贴的动作呢，通过本篇文章的学习，将实现如何实现在Postman中参

喜欢ヅ旅行/ 2022年03月18日 15:31/ 0 赞/ 1266 阅读

相关 JDK环境变量配置详细解析

以前只知道傻傻的跟着教程配置jdk环境变量，今天看了点资料，仔细的学习了一下，明白了为什么这么配置，还学了一些花里胡哨的玩意，总结一下。环境变量的配置过程（以

深碍√TFBOYSˉ_/ 2021年06月24日 16:00/ 0 赞/ 502 阅读