我的编程空间,编程开发者的网络收藏夹
学习永远不晚

关于vue设置环境变量全流程

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

关于vue设置环境变量全流程

vue设置环境变量

在开发的时候一般会有是三个环境:开发环境 测试环境 线上环境

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

  • development模式用于 vue-cli-service serve
  • production模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  • test模式用于 vue-cli-service test:unit

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

  • 本地环境(local)
  • 开发环境(development)
  • 测试环境(devtest)
  • 预发布环境(beta)
  • 生产环境(production)

参考链接:配置环境变量

创建不同环境变量文件

在这里插入图片描述

如官方文档所说,通过为.env文件增加后缀来设置某个模式下特有的环境变量。我这里有5个环境,所以配置了5个.env文件。如下图:

在这里插入图片描述

给.env文件添加内容

基本格式如下:

NODE_ENV=环境名称VUE_APP_URL=对应的环境地址

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

在这里插入图片描述

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

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

如官方文档所说,可以通过传递 --mode 来配置不同的模式。我自己的项目配置如下图:

在这里插入图片描述

使用

文件已创建好,配置语句也已写好。怎么用它呢?

首页你需要哪个环境,就执行哪个环境的命令语句。

比如我现在需要local环境,就执行 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

通过 --mode xxx 来执行不同环境

"scripts": {
  "serve": "vue-cli-service serve --open",
  "test": "vue-cli-service build --mode testing",
  "build": "vue-cli-service build",
}

–open 是运行的时候自动开出页面

  • 通过 npm run serve 启动本地 , 执行 development
  • 通过 npm run test 打包测试 , 执行 testing
  • 通过 npm run build 打包正式 , 执行 production

2、在项目根目录下创建.env.*文件

.env.development 本地开发环境配置

NODE_ENV='development'

.env.production 正式环境配置

 NODE_ENV='production'

.env.staging 测试环境配置

NODE_ENV='production'

3.在class="lazy" data-src下面创建一个config文件夹下面配置三个相对应的的js

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

// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.NODE_ENV)
module.exports = config

配置对应环境的变量,拿本地环境文件 env.development.js 举例,用户可以根据需求修改

// 本地环境配置
module.exports = {
  title: 'vue-h5-template',
  baseUrl: 'http://localhost:9018', // 项目地址
  baseApi: 'https://test.xxx.com/api', // 本地api请求地址
  APPID: 'xxx',
  APPSECRET: 'xxx'
}

4.在我们根目录下的class="lazy" data-src文件内main.js文件中引入

import {baseUrl} from "./config/index";
// 因为导出的是一个对象,结构赋值
console.log(baseUrl);

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

关于vue设置环境变量全流程

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue如何设置环境变量

这篇文章将为大家详细讲解有关vue如何设置环境变量,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。vue设置环境变量在开发的时候一般会有是三个环境:开发环境 测试环境 线上环境vue 中有个概念就是模式,默
2023-06-29

关于python环境变量如何配置

这篇文章主要介绍了关于python环境变量如何配置,当我们在自己电脑上同时安装了python2.x和python3.x版本的解释器的时候,就需要对环境变量的配置进行一定的修改,需要的朋友可以参考下
2023-05-16

windows10环境变量设置教程

环境变量是操作体系中的一个重要设置,可是有的windows10用户还不清楚环境变量应该怎样设置。其实办法很简单,翻开运转窗口,经过sysdm.cpl指令调出体系特点窗口,之后切换到高档选项卡,就能看到有个环境变量的按钮了,点击这个按钮就能进
2023-07-15

Java环境变量设置教程

以下是详细的 Java 环境变量设置教程:下载 Java JDK(Java Development Kit)安装程序,并运行安装程序。你可以从 Oracle 官方网站(https://www.oracle.com/java/technolo
2023-07-10

vue 开发环境和生产环境设置不同的变量

在 Vue 开发中,我们很常见要在不同的环境下设置不同的变量。例如在 development 环境下,我们可能需要打开一些调试工具,而在 production 环境下,我们则需要关闭这些调试工具来提高应用的性能。这时候,我们就需要在开发环境和生产环境下设置不同的变量。下面,我们将介绍如何在 Vue 中设置不同的变量。1. 在 Vue-Cli 中设置Vue-Cli 是 Vue.j
2023-05-24

vue项目多租户环境变量的设置

本文主要介绍了vue项目多租户环境变量的设置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-05-16

关于jdk环境变量的配置方式解读

这篇文章主要介绍了关于jdk环境变量的配置方式解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-01-10

winxp系统设置java环境变量的详细教程

我们都知道想要进行Java的程序编辑,就要首先在电脑上设置环境变量,这样编程客栈才编程客栈能够运行java程序,下面一起看看xp系统的电脑如何设置java变量。1、设置环境变量之前,我们肯定首先需要安装java,首先,找到你安装java的路
2023-06-13

详细教程:如何在PyCharm中设置环境变量

PyCharm是一款功能强大的Python集成开发环境,让开发者可以更高效地编写、调试和管理Python代码。在日常开发过程中,经常会遇到需要配置环境变量的情况,以便程序能够正确地访问所需的资源。本文将详细介绍如何在PyCharm中配置环境
详细教程:如何在PyCharm中设置环境变量
2024-02-24

关于jdk环境变量配置以及javac不是内部或外部命令的解决

这篇文章主要介绍了关于jdk环境变量配置以及javac不是内部或外部命令的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-01-09

安装nvm并使用nvm安装nodejs及配置环境变量的全过程

有时候使用nvm管理node会发现无法使用node或npm,主要原因是环境变量没有配置成功,下面这篇文章主要给大家介绍了关于安装nvm并使用nvm安装nodejs及配置环境变量的相关资料,需要的朋友可以参考下
2023-03-19

linux安装jdk并设置环境变量的方法教程(看这一篇够了)

1.查看linux位数查看linux是32位还是64位,影响需要下载JDK的版本 系统位数jdk位数x86(32位)32位x86_64(64位)32位64位在linux命令输入: uname -a如果是64
2022-06-04

编程热搜

目录