vue生产环境和开发环境配置,vue需要的环境

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

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

目录

vue设置环境变量创建不同的环境变量文件将内容添加到。env文件使用多个环境变量在package.json中添加对应不同环境的执行语句什么是多个环境变量?配置过程

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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: