vue生产环境和开发环境配置,vue需要的环境,关于vue设置环境变量全流程

本文主要介绍了在vue中设置环境变量的全过程，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

vue设置环境变量

在开发的时候，一般有三个环境：开发环境、测试环境、上线环境。

vue 中有个概念就是模式，默认先vue cli 有三个模式

Vue-Vue-CLI-服务服务的开发模式Vue-CLI-服务构建和Vue-CLI-服务测试的生产模式：Vue-CLI-服务测试的e2etest模式：单位

但是往往开发的时候可能不止有三种：

本地环境(本地)开发环境(开发)测试环境(开发测试)预发布环境(测试版)生产环境(生产)

链接：配置环境变量

创建不同环境变量文件

正如官方文件所说，通过在。env文件中，设置了特定模式特有的环境变量。我这里有5个环境，所以我配置了5个。环境文件。如下图：

给.env文件添加内容

基本格式如下：

NODE_ENV=环境名称VUE _应用程序_URL=相应的环境地址

我的本地环境的配置如下图所示：

我在本地使用easy-mock模拟数据，所以配置的地址是模拟接口地址。

在package.json中添加不同环境对应的执行语句

正如官方文件所说，通过passing - mode可以配置不同的模式。我自己的项目配置如下：

使用

文件已经创建，配置语句已经编写。怎么用？

您可以在主页上执行您需要的环境的命令语句。

例如，如果我现在需要一个本地环境，我将执行npm run local-serve。

如下图所示：

然后通过 process.env.NODE_ENV 获取环境名；通过 process.env.VUE_APP_URL 获取环境对应的url。

例如，在axios请求中，我们可以将其baseURL设置为process.env.VUE_APP_URL

如下图所示：

如果你不确定自己现在处于哪个环境变量，可以看一下console.log("当前环境变量：" process.env.NODE_ENV ")和console.log("当前环境路径：" process.env.VUE_APP_URL ")。

总之，你需要哪个环境变量，只要【npm run对应的环境变量】就搞定了！

多环境变量

什么是多环境变量？

项目运行时，会根据启动指令运行不同的环境。在不同的环境下，我们配置相应的所需变量来满足我们的开发需求，这就是所谓的多环境变量。

一般环境分为开发环境、测试环境和生产环境。

配置流程

1、在项目根目录下的package.json中配置serve test build

通过-modexxx执行不同的环境。

脚本':{

'发球':' vue-CLI-发球-开球'，

测试':' vue-CLI-服务构建模式测试'，

build ':' vue-CLI-服务版本'，

}

open运行时自动打开页面。

通过npm run serve启动本地，通过npm run test包测试执行开发，通过npm run build包正式执行测试，执行生产。

2、在项目根目录下创建.env.*文件。env.development本地开发环境配置

NODE_ENV='开发'。env.production正式环境配置

NODE_ENV='生产'。测试环境配置

NODE_ENV='生产'

3.在src下面创建一个config文件夹下面配置三个相对应的的js

重新配置三是因为修改方便，不需要重启项目，符合开发习惯。

//根据环境引入不同的配置process.env.NODE_ENV

const config=require('。/env。process.env.NODE_ENV)

模块.导出=配置

配置与环境相对应的变量。以本地环境文件env.development.js为例。用户可以根据需要进行修改。

//本地环境配置

模块.导出={

标题：“vue-H5-模板”，

基本URL:“3358 localhost:9018”，//项目地址

基本API:' https://test.xxx.com/API',//local API请求地址

APPID:“XXX”，

app secret:“XXX”

}

4.在我们根目录下的src文件内main.js文件中引入

从“”导入{baseUrl}。/config/index '；

//因为导出的对象是对象，所以结构被赋值。

console . log(base URL)；

以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录