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

2024-08-24 13:54:56

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.在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.在我们根目录下的src文件内main.js文件中引入

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

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

vue3实战教程之axios的封装和环境变量

目录 axios 基本使用配置封装请求时添加loading 环境变量总结 axios axios: ajax i/o system. 一个可以同时在浏览器和node环境进行网络请求的第三方库功能特点: 在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API 拦截请求和响应转换请求和响应数据等等基本使用 get请求 // 导入的axios是一个实例对象 import axios from 'axios' // a
Vue配置环境变量的正确打开方式

目录第一配置package.json 第二配置介绍简单说明看详情点击上面tps 第三在根目录新建文件第四第五总结: 第一配置package.json package.json 里的 scripts 配置 serve test build,通过 --mode xxx 来执行不同环境通过 npm run serve 启动本地 , 执行 development 通过 npm run test 打包测试 , 执行 testing 通过 npm run build 打包正式 , 执行
Vue CLI中模式与环境变量的深入详解

前言在实际项目的开发中,我们一般会经历项目的开发阶段.测试阶段和最终上线阶段,每一个阶段对于项目代码的要求可能都不尽相同,那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果,使用不同的功能呢? 这里就需要引入环境的概念.官方文档中模式和环境变量说明一般一个项目都会有以下 3 种环境: 开发环境(开发阶段,本地开发版本,一般会使用一些调试工具或额外的辅助功能): 测试环境(测试阶段,上线前版本,除了一些 bug 的修复,基本不会和上线版本有很大差别): 生产环境(上线阶段,正式对
vue cli4下环境变量和模式示例详解

本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下: 官方文档环境变量一个环境变量文件只包含环境变量的键值对: NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意: NODE_ENV - 是 "development"."production" ."test"或者自定义的值.具体的值取决于应用运行的模式 BASE_URL - 会和 vue.con
深入浅析vue全局环境变量和模式

我们可以在项目根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略一个环境文件只包含环境变量的"键=值"对,并且必须以VUE_APP开始: FOO=bar //无效 VUE_APP_SE
关于vue设置环境变量全流程

目录 vue设置环境变量创建不同环境变量文件给.env文件添加内容在package.json中添加不同环境对应的执行语句使用多环境变量什么是多环境变量? 配置流程 vue设置环境变量在开发的时候一般会有是三个环境:开发环境测试环境线上环境 vue 中有个概念就是模式,默认先vue cli 有三个模式 development模式用于 vue-cli-service serve production模式用于 vue-cli-service build 和 vue-cli-servi
关于Rust 使用 dotenv 来设置环境变量的问题

Rust 语言是一种高效.可靠的通用高级语言.其高效不仅限于开发效率,它的执行效率也是令人称赞的,是一种少有的兼顾开发效率和执行效率的语言. Rust语言的特点高性能 - Rust 速度惊人且内存利用率极高.由于没有运行时和垃圾回收,它能够胜任对性能要求特别高的服务,可以在嵌入式设备上运行,还能轻松和其他语言集成. 可靠性 - Rust 丰富的类型系统和所有权模型保证了内存安全和线程安全,让您在编译期就能够消除各种各样的错误. 生产力 - Rust 拥有出色的文档.友好的编译器和清晰的错误提示
python设置环境变量的原因和方法

相信很多初学python的小伙伴都会遇到这样的坑:环境变量配置不好,无法正常启动python.那么环境变量究竟是个什么东西呢?为什么要设置它?下面我们来说一说. 1.什么是环境变量引用百度百科里面的解释:环境变量是在操作系统中一个具有特定名字的对象,它包含了一个或者多个应用程序所将使用到的信息.看到这里我相信大家可能还是有所疑惑,但是,不急,接着看. 2.为什么需要环境变量 windows系统下,假如我们安装了某一款软件,安装结束后,在安装目录会生成一个该软件的.exe文件,双击该文件,我们就
python设置环境变量的作用和实例

Python的环境变量环境变量说明 PYTHONSTARTUP 在交互式启动时执行的文件(无默认值) PYTHONPATH ':' - 以默认模块搜索路径为前缀的分隔目录列表.结果是sys.path. PYTHONHOME 交替的 <prefix> 目录 (或者 <prefix>:<exec_prefix>). 默认的模块搜索路径为 <prefix>/pythonX.X. PYTHONCASEOK 忽略import语句中的大小写(Windows). PY
Webpack设置环境变量的一些误区详解

一.前言日常的前端开发工作中,至少会有两套构建环境一套开发时使用,构建结果用于本地开发调试,不进行代码压缩.打印 debug 信息.包含 sourcemap 文件等一套发布时使用,构建结果用于线上,即代码都是压缩过的.运行时不打印 debug 信息.静态文件不包括 sourcemap 等 webpack 4.0 版本开始引入了 mode 的概念选项描述 development 会将 process.env.NODE_ENV 的值设为 development.启用 NamedChunks
linux安装jdk并设置环境变量的方法教程(看这一篇够了)

1.查看linux位数查看linux是32位还是64位,影响需要下载JDK的版本系统位数 jdk位数 x86(32位) 32位 x86_64(64位) 32位 64位在linux命令输入: uname -a 如果是64位机器,会输出x86_64 2.下载JDK 下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-5066655.html 对应步骤1,下载64位的linx版本 3.安装JD
python设置环境变量的作用整理

python设置环境变量有什么用? 1.设置环境变量可以在cmd命令行中找到python命令: 2.设置环境变量可以在安装exe的第三包的时候找到对应python版本路径: 3.设置环境变量可以在用pip install 包的时候找到路径. 简言之.python设置环境变量可以使命令行里面直接运行脚本.很多ide也需要你预设python环境变量,不然找不到你的python parser. 知识点扩展: Python的环境变量环境变量说明 PYTHONSTARTUP 在交互式启动时执行的文件(
浅谈Linux下修改/设置环境变量JAVA_HOME的方法

1. 永久修改,对所有用户有效 # vi /etc/profile //按键盘[Shift + g], 在profile文件最后添加下面的内容: JAVA_HOME=/usr/local/java/jdk1.7.0_25 JRE_HOME=$JAVA_HOME/jre CLASSPATH=$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar PATH=$JAVA_HOME/bin:$PATH export PATH JAVA_HOME JRE_HOME C
golang 在windows中设置环境变量的操作

安装完成后需要在系统环境变量中设置 GOPATH为项目目录 GOROOT为安装目录 path中设置好安装目录到bin目录打开cmd,输入go env,出现如下配置生效补充:Golang 环境变量须知 1.前言无论你是使用 Windows.Linux 还是 Mac 操作系统来开发 Go 应用程序,在安装好 Go 安装语言开发工具之后,都必须配置好 Go 语言开发所要求的环境变量,才算初步完成 Go 开发环境的搭建. 但对于一些初学者来说,可能不太明白 Go 语言中常用的环境变量的作用以及如