vite环境变量配置

这篇具有很好参考价值的文章主要介绍了vite环境变量配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

环境变量就是会根据当前的代码环境变化的变量叫做环境变量。
我们在项目中的代码环境大致分为下面几种:
1、开发环境
2、测试环境
3、预发布环境
4、灰度环境
5、生产环境

我们在项目中通常需要区分线上环境和开发环境的后端地址,例如:

开发环境:http://dev.api/
生产环境:https://api/

我们每次在开发的时候都要区分confug.url的地址,如果测试的时候忘改地址了,地址是线上地址,那就会出大问题,测试数据直接影响到线上了。

我们在使用一些第三方sdk:百度地图sdk、小程序sdk等第三方sdk接口的时,需要带上身份信息APP_KEY,测试环境、生产环境、开发环境是不一样的key,例如这里的三种开发环境对应的不同sdk

  • 开发环境:110
  • 测试环境:111
  • 生产环境:112

假设现在是开发环境,APP_KEY为110,这里模拟一个axios请求:

// request.js
const getUserInfo = () => {
   axios.post({
     params : {
        APP_KEY : 110  // 开发环境的APP_KEY : 110
     }
   })
}

如果我们切换到生产环境,这里的APP_KEY需要换成112,如果切到测试环境,APP_KEY要换成111,这种手动更换是非常麻烦的。

所以我们这里需要区分一下生产环境和开发环境
新建两个文件:
.env.development 开发和测试环境
.env.production 生产环境

// .env.development 
APP_KEY = 110 
BASE_URL = http://test.api/
// .env.production
APP_KEY = 112
BASE_URL = http://api/

我们在运行npm run dev的时候,希望上面的asiox的请求读的是.env.development 文件中的APP_KEY,运行npm run build的时候,希望asiox的请求读的是.env.production中的APP_KEY,并且对应的axios.basu_url自动更换到对应的地址。(这就是环境变量的意义)

vite中环境变量的处理:dotenv第三方库(vite内置了dotenv库)
dotenv第三方库会在启动npm run dev的时候读取.env文件,并解析这个文件中的环境变量,将其注入到process对象上。

在node.js中,process对象(进程对象)代表node.js应用程序。
process 对象是一个全局变量,它提供当前 Node.js 进程的有关信息,以及控制当前 Node.js 进程。
process文档 (👈点击直达)

export default defineConfig(({command})=>{
    console.log('process内容',process.env);
    // ......其他配置
})

vite环境变量配置

vite考虑到和其他配置的一些冲突问题,它不会直接注入到process对象下,而是调用viteloadEnv来手动确认env文件。
loadEnv的三个参数:
1、mode:模式,根据你启动的的命令来的,比如npm run dev就是开发环境,build就是生产环境,如果你启动的命令为:npm run dev --mode development,那么mode会设置为development传递进来,启动命令为npm run dev的话系统会默认帮我们自动补全,这里也可以对mode进行更改,--mode xxxx(自定义名)
2、envDir:环境变量配置文件所在目录,这里可以使用process.cwd(),也可以这么写:envDir:"C:\Users\123\Desktop\vite-test"指向文件目录地址
3、prefixes:接受的环境变量前缀,不写默认为 env

export default defineConfig(({command,mode})=>{
    const env = loadEnv(mode,process.cwd(),prefixes="")
    console.log(env);  // 这里APP_KEY 110,并且BASE_URL也对应的是测试环境地址,挂载到env下面

    // ......其他配置
})

vite环境变量配置

process.cwd():返回当前node进程的工作目录

当我们调用loadEnv的时候,它会做如下几件事情:
1、直接找到.env文件,并解析其中的环境变量,放到一个对象里

2、将传进来的mode这个变量的值进行拼接:.env.development,并根据提供的目录去取对应的配置文件进行解析,并放进一个对象里

3、我们可以理解为下面的操作:
const baseEnvConfig = 读取.env的配置
const modeEnvConfig = 读取.env.mode(根据传入的mode决定,mode=development那么就是.env.development)文件
const lastEnvConfig = {...baseEnvConfig,...modeEnvConfig}

如果是客户端,vite会将对应的环境变量注入到import.meta.env里面去。
但是这里vite做了一个拦截,为了防止我们将隐私性的变量直接注入到import.meta.env,我们的环境变量就必须得是VITE_开头,否则vite不会将环境变量注入到import.meta.env

// .env.development文件:开发环境
APP_KEY = 110 
BASE_URL = http://dev.api/
// request.js
console.log('import.meta.env的内容',import.meta.env)

未找到.env.development文件中的环境变量,因为开头不是VITE_vite拦截了注入操作。
vite环境变量配置

// .env.development文件:开发环境
VITE_APP_KEY = 110 
VITE_BASE_URL = http://dev.api/

vite环境变量配置
当然,VITE_是一个默认前缀,我们也可以在vite.base.config.js文件中更改import.meta.env注入的默认前缀:

import { defineConfig } from "vite";
export default defineConfig({
    envPrefix:"ABC_"  // 配置import.meta.env注入的前缀名称
})

vite环境变量配置
到这里环境变量配置就已经完成了,如果我们想要添加新的环境,例如:测试环境,那么只需要新建一个.env.test文件

// .env.test文件:测试环境
ABC_APP_KEY = 111
ABC_BASE_URL = http://test.api/

package.json中添加测试环境的启动方式"test" : "vite --mode test"

{
  "scripts": {
    "dev": "vite",
    "build" : "vite build",
    "test" : "vite --mode test"
  },
  // ......其它配置
}

启动npm run testloadEnv会自动根据--mode test来寻找环境变量文件,.env后拼接test,也就是.env.test文件
vite环境变量配置文章来源地址https://www.toymoban.com/news/detail-481905.html

// request.js
console.log('import.meta.env的内容',import.meta.env)
// 利用配置的环境变量请求
const getUserInfo = () => {
    axios.post({
        params : {
            APP_KEY : import.meta.env.ENV_APP_KEY  // 根据环境变量自动匹配APP_KEY
        }
    })
}

到了这里,关于vite环境变量配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3之vite创建h5项目1(创建vite项目、配置IP访问项目、配置多环境变量与预览打包生产效果、配置别名)

    初始化项目模块 添加环境变量文件,每个文件写入配置,定义 env 环境变量前面必须加 VITE_ dev环境 test环境 prod环境 在项目根目录下创建 03-1:配置多环境变量之dev环境 .env.development 03-2:配置多环境变量之test环境 .env.test 03-3:配置多环境变量之prod环境 .env.production 03-4 修改

    2024年02月02日
    浏览(83)
  • 【Vue3实践】(六)Vue3使用vite处理环境变量、打包部署、nginx配置

    由于在日常开发中会有一部分前端的开发任务,会涉及到Vue的项目的搭建、迭代、构建发布等操作,所以想系统的学习一下Vue相关的知识点,本专题会依照Vue的搭建、开发基础实践、进阶用法、打包部署的顺序进行记录。 历史文章链接如下: 《Vue3搭建、路由配置与基本语法

    2023年04月08日
    浏览(141)
  • Vite的环境变量

    环境变量 Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量: 生产环境替换 在生产环境中,这些环境变量会在构建时被静态替换,因此,在引用它们时请使用完全静态的字符串。动态的 key 将无法生效。例如,动态 key 取值

    2024年02月11日
    浏览(28)
  • 前端vue3分享——项目封装axios、vite使用env环境变量

    大家好,我是yma16,本文分享关于前端vue3分享——项目封装axios、使用env环境变量。 该系列往期文章: csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板 认识vite_vue3 初始化项目到打包 什么是axios axios是一个流行的JavaScript库,用于在浏览器和Node.js环境中进行H

    2024年02月07日
    浏览(96)
  • 在vite或者vue-cli中使用.env[mode]环境变量

    在项目中总会遇到一些默认的配置,需要我们配置到静态文件中方便我们去获取,这时候就可以用到这个.env环境变量文件,在cli创建的项目中顶层的nodejs会有一个process对象,这个对象可以根据不同的环境获取不同的环境配置文件,但是vite中获取变量的方式不一样。 创建变量文件

    2024年02月06日
    浏览(117)
  • vue+vite线上环境地址和开发环境配置方式

    vue+vite线上环境地址和开发环境配置方式 第一种(放飞自我写法) 说明:后端已解决跨域的情况下配置线上部署访问地址和开发时候地址 java解决跨域代码: 前端就能放飞自我,顺便配置地址路径 在public目录下写一个config.js文件 在Index.html中引入,注意: 引入路径必须是/斜杠 开头 放

    2024年02月14日
    浏览(36)
  • Vite+Vue根据环境配置Websocket地址

    上回说到,利用vite加载不同mode下的配置文件,可以实现不同运行环境下的参数配置。在前端应用中经常使用到Websocket,其地址同样可以在.env中间中配置。 vite.config.ts代码的执行是在createApp之前,不可以在vite.config.ts中使用例如 pinia 、 router 等组件。可以使用import.meta.env获取

    2024年02月19日
    浏览(38)
  • Android环境变量&macOS环境变量配置

    关于作者:CSDN内容合伙人、技术专家, 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 ,擅长java后端、移动开发、商业变现、人工智能等,希望大家多多支持。 我们继续总结学习 Android基础知识 ,温故知新。 今天我们讲讲Android环境变量的配置,这个还是比较

    2024年02月08日
    浏览(52)
  • Mac系统下配置环境变量:Javajdk、maven、tomcat 环境变量配置及对应配置文件

    离职回到学校,电脑是赎买的公司Mac。什么都没有,所以需要重新下载和配置环境变量,就来写这篇文章啦。 /etc/profile 和 /etc/paths 是系统级别的配置文件,后面几个是用户级的配置文件。 文件加载顺序: 系统启动时会按上面罗列的配置文件从上到下的顺序加载。但是,如果

    2024年02月14日
    浏览(52)
  • vue中vite.config.js配置跨域以及环境配置详解

    我们的 .env.development 和 .env.production 文件里面都会有 VITE_APP_ENV 配置: 在我们的 vite.config.js文件中: 以上是 vite.config.js 的配置,上面展示了在不同环境下去请求对应环境的域名并且配置代理进行跨域. 1.在vue.config.js中设置一下代码: 2. 创建axioss实例时,将baseUrl设置为 \\\'/api\\\'

    2024年02月15日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包