关于vue设置环境变量全流程
目录
- vue设置环境变量
- 创建不同环境变量文件
- 给.env文件添加内容
- 在package.json中添加不同环境对应的执行语句
- 使用
- 多环境变量
- 什么是多环境变量？
- 配置流程
vue设置环境变量
在开发的时候一般会有是三个环境：开发环境 测试环境 线上环境
vue 中有个概念就是模式，默认先vue cli 有三个模式
development模式用于 vue-cli-service serveproduction模式用于 vue-cli-service build 和 vue-cli-service test:e2etest模式用于 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);
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
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 的修复,基本不会和上线版本有很大差别): 生产环境(上线阶段,正式对
-
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全局环境变量和模式
我们可以在项目根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略 一个环境文件只包含环境变量的"键=值"对,并且必须以VUE_APP开始: FOO=bar //无效 VUE_APP_SE
-
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设置环境变量全流程
目录 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 语言中常用的环境变量的作用以及如