当前位置:首页 > 技术 > 正文内容

Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇)

Lotus2022-10-06 18:15技术

在项目或产品的迭代过程中,通常会有多套环境,常见的有:

  • dev:开发环境
  • sit:集成测试环境
  • uat:用户接收测试环境
  • pre:预生产环境
  • prod:生产环境

环境之间配置可能存在差异,如接口地址、全局参数等。在基于 vue-cli (webpack) 的项目中只需要添加 .env.xxx 文件,然后在 package.jsonscripts 启动或打包命令中指定 mode 参数即可,获取环境变量时使用 process.env.xxxvite 使用方式类似,但获取环境变量使用 import.meta.env

1 环境变量和模式

上面提到,vite 中使用 import.meta.env 的方式来获取环境变量。在 main.ts 中添加如下代码进行测试:

const env = import.meta.env
console.log(env)

1.1 development

首先执行 yarn dev 启动服务,在浏览器控制台输出 env 的值:

image-20221006002025067

可以看出 import.mata.env 中默认包括五个内置环境变量:

MODE:应用的运行模式。由于我们是通过 yarn dev 启动服务,而 yarn dev 本质是执行 vite 启动,未显式执行 mode,故 MODE 的值为 development

BASE_URL:部署应用时的基本 URL,在 vite 的配置文件 vite.config.ts 中的 base 属性指定;

PROD:是否是生产环境(即是否通过 vite build 构建)

DEV:是否是开发环境(即是否通过 vite 启动服务运行)

SSR:是否是服务端渲染模式。

1.2 production

首先执行 yarn build 打包(本质上是执行 vite build),打包完成后通过 yarn preview 对打包结果进行预览。访问预览地址,在浏览器控制塔输出如下:

image-20221006002902362

可以看出模式为 production,非开发模式,是生产模式。

1.3 指定模式

修改 package.json 中的 scripts 命令,分别为开发和打包指定三种模式:dev、uat、prod。指定模式只需要在命令后通过参数 --mode 指定即可。

"scripts": {
  "dev": "yarn dev:dev",
  "dev:dev": "vite --mode dev",
  "dev:uat": "vite --mode uat",
  "dev:prod": "vite --mode prod",
  "build:dev": "vue-tsc --noEmit && vite build --mode dev",
  "build:uat": "vue-tsc --noEmit && vite build --mode uat",
  "build:prod": "vue-tsc --noEmit && vite build --mode prod",
  "preview": "vite preview"
},

执行 yarn dev:dev,浏览器输出 MODE: dev

执行 yarn dev:uat,浏览器输出 MODE: uat

执行 yarn dev:prod,浏览器输出 MODE: prod

接下来依次通过 build:xxx 先打包后再通过 preview 预览打包,结果与上面一致,浏览器输出的 MODE 与命令中 --mode 指定的值一致。

2 环境文件(.env)

Vite 使用 dotenv环境文件目录 中加载环境文件,默认情况下,环境文件目录为项目的根目录,即把环境文件放在项目根目录下。在 vite 中,可以通过配置 envDir 属性指定环境文件目录。

2.1 指定环境文件目录

在项目根目录下创建目录 env,用于存放所有的环境文件。

vite.config.ts 中添加 envDir 属性指定环境文件目录为 env

...
export default defineConfig({
  ...
  envDir: path.resolve(__dirname, './env')
})

2.2 添加环境文件

环境文件命名如下:

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载,但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载,但会被 git 忽略

不同环境的变量可以定义在 .env.[mode] 文件中,如 .env.dev.env.prod 等,如果 .env 文件和 .env.[mode] 中有相同的 key,后者定义的值会覆盖前者。

这里咱们以三个环境为例编写 demo,分别是:

  • 开发环境,mode 为 dev,文件名为 .env.dev
  • 测试环境,mode 为 uat,文件名为 .env.uat
  • 生产环境,mode 为 prod,文件名为 .env.prod

在上面指定的环境文件目录 env 下创建上面三个文件,以及所有情况下都会加载的 .env 文件。四个文件内容如下:

.env 文件

VITE_BASE_API=/api
VITE_APP_NAME='demo app'
DEMO_STR=hello

.env.dev 文件

VITE_BASE_API=/dev-api

.env.uat 文件

VITE_BASE_API=/uat-api

.env.prod 文件

VITE_BASE_API=/prod-api

四个文件都定义了变量 VITE_BASE_API.env 中还额外定义了 VITE_APP_NAMEDEMO_STR 两个变量。

使用 yarn dev:dev 启动服务,或者先使用 yarn build:dev 打包,再通过 yarn preview 预览打包结果,浏览器中都会输出 VITE_BASE_APIVITE_APP_NAME 的值。VITE_BASE_API 值为 .env.dev 中定义的 /dev-apiVITE_APP_NAME 值为 .env 中定义的 demo app,但是 .env 中定义的 DEMO_STR 不会输出。由此可以看出:

  1. 无论是哪种模式,.env 文件都会被加载;
  2. 如果 .env.[mode].env 中有相同的 key,对应模式的环境文件中的值会覆盖 .env 对应 key 的值;
  3. 环境变量需要以 VITE_ 开头才会暴露到 import.meta.env 中。

有兴趣的朋友可以再添加 .env.dev.local 文件进行测试,.env.[mode].local 优先级最高。

3 TypeScript 提示

我使用的 IDE 是 WebStorm,之前在 main.ts 中将 import.meta.env 赋值给变量 env

const env = import.meta.env

输入 env.,WebStorm会有下图中的提示:

image-20221006110746181

但是没有提示我们添加的环境变量。可以添加 env.d.ts 解决。在 src 目录下创建文件 env.d.ts,文件内容如下:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_BASE_API: string;
  readonly VITE_APP_NAME: string;
}

// eslint-disable-next-line no-unused-vars
interface ImportMeta {
  readonly env: ImportMetaEnv
}

在 ImportMetaEnv 中添加上环境文件中定义的变量即可。

此时再次在 main.ts 中输入 env.,IDEA便可以有正确的代码提示,并且可以获取该变量的类型:

image-20221006111522409

4 补充说明

在基于 vue-cli(webpack) 的项目中获取环境变量是通过 process.env.xxx 的方式,如果不进行配置,在浏览器中会报错,提示 process is undefine。于是我按照网上的方式,在 vite.config.ts 中首先通过 vite 提供的 loadEnv 函数加载环境变量,然后在导出对象中添加 define 属性,在 define 中将 loadEnv 返回的结果赋值给 process.env,如下:

define: {
  'process.env': loadEnv(env.mode, process.cwd(), '')
}

通过这种方式,在开发模式下(vite 启动服务),可以正常获取到环境变量,甚至环境变量不要求以 VITE_ 开头。但是使用 vite build 打包一直失败,在使用了 process.env 提示 parse error,到现在也不知道怎么处理。如果知道怎么处理的伙伴欢迎留言。

不过个人更推荐按照官方的方式,使用 import.meta.env

文中 demo 在 github 上搜索 vue3-vite-archetype 获取,main 分支可以直接 yarn dev 启动运行; template 分支是 yyg-cli 执行 yyg create 创建项目时拉取的模板。你也可以先执行 npm install -g yyg-cli 安装 yyg-cli 脚手架工具,然后通过 yyg create xxx 创建项目,创建后的项目包含了 vue3 vite 的全部demo。

扫描二维码推送至手机访问。

版权声明:本文来源于网络,仅供学习,如侵权请联系站长删除。

本文链接:https://news.layui.org.cn/post/105.html

分享给朋友:

“Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇)” 的相关文章

如何使用 Yolov4 训练人脸口罩检测模型

前言 疫情当下,出入医院等公共场所都被要求佩戴口罩。这篇博客将会介绍如何使用 Yolov4,训练一个人脸口罩检测模型(使用 Yolov4 的原因是目前只复现到了 v4 ????),代码地址为 https://github.com/zhiyiYo/yolov4。 Yolov4 Yolov4 的神经网络结构相比 Yolov3 变化不是很大,主要更换了激活函数为 Mish,增加了 SPP 块和 PAN...

第三章 知己知彼

知彼知己,百战不殆;不知彼而知己,一胜一负;不知彼,不知己,每战必殆。《谋攻篇》 前面两章其实重点是在掰扯数智化,IT研发本身的数字化其实除了DevOps这一种手段之外还有很多,比如Low Code、RPA等等,AI都可以自动写代码了,还有啥是不可能的呢!不过本人能力有限,这点斤两也就敢玩玩DevOps,其他的碰都就不敢碰,接下来聚焦到DevOps的一些见解上。 3.1 剑锋所指      ...

一篇文章带你掌握主流服务层框架——SpringMVC

一篇文章带你掌握主流服务层框架——SpringMVC 在之前的文章中我们已经学习了Spring的基本内容,SpringMVC隶属于Spring的一部分内容 但由于SpringMVC完全针对于服务层使用,所以我们在介绍时常常把SpringMVC单独当作一个大章节来学习 温馨提醒:在学习SpringMVC前请确保已学习Spring内容 SpringMVC简介 首先我们先来简单了解一下SpringM...

[s905l3]性价比神机mgv3000全网首拆,刷armbian实现更多价值!

最近花55淘了一台mgv3000,s905l3,2+16G带蓝牙,真的性价比没得说 S905L3 工艺28nm差于s905l3a 主频1.9Ghz,超频可以达到2Ghz,GPU是Mail450,当服务器跑ha,nas什么都是很不错的。 而且还自带蓝牙,总体性价比比s905l3a系列高多了 按我的方法可以启动,网卡没有问题,但是目前没有显示,没有蓝牙。 等之后我有时间了照着安卓的dtb改一改也许会解...

Python基础(九) | time random collections itertools标准库详解

⭐本专栏旨在对Python的基础语法进行详解,精炼地总结语法中的重点,详解难点,面向零基础及入门的学习者,通过专栏的学习可以熟练掌握python编程,同时为后续的数据分析,机器学习及深度学习的代码能力打下坚实的基础。 ????本文已收录于Python基础系列专栏: Python基础系列教程 欢迎订阅,持续更新。 Python自身提供了比较丰富的生态,拿来即用,可极大的提高开发效率 9...

前端三剑客快速入门(二)

前言 本文书接上回,继续css的知识,序号就重新开始了。上篇内容:前端三剑客快速入门(一) CSS 盒子模型 盒子模型属性: border外框 margin外边距 padding内边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。