（六）Vue3-huohuo-admin 开发配置（Vite运行 + .env文件）

HuoHuo
811 阅读7分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路

本篇的重点是 Vite 的运行配置与.env文件的介绍与配置

Vite

关于Vite的配置，官网非常详细，详情请戳。

Vite 的包管理工具

在Vite源码中，package.json文件中有这么一串脚本命令：

image-20220506102804896

使用only-allow可以强制在项目上使用特定的包管理器，详细用法

所以我们可以了解到，Vite的源码总强制使用了pnpm作为包管理工具。其实在Vue3的源码中，我们也可以看到这行命令，实际上也是使用pnpm进行包的管理。至于为什么使用 pnpm，而不是npm或者yarn，在系列的第二篇《（二）Vue3-huohuo-admin 初始化项目篇》已经做了解释。

这里我们也给项目加上这行命令，来帮助我们统一一下包管理工具的使用。

image-20220506103709037

Vite dev

首先我们来看一条运行命令

"dev": "cross-env --max_old_space_size=4096 vite"

打开内存限制

--max_old_space_size是什么，为什么设置 4096？

内存限制参数。当为正在执行的应用程序（你的项目比较大时）分配的内存小于所需内存时，会发生内存不足的错误。因为默认情况下，Node.js 中的内存限制为 512MB，这时候我们就需要处理内存限制问题。一般来说，在前端项目中，我会分配四分之一（4G）的主机内存供项目运行

node --max-old-space-size=1024 index.js #increase to 1gb
node --max-old-space-size=2048 index.js #increase to 2gb
node --max-old-space-size=3072 index.js #increase to 3gb
node --max-old-space-size=4096 index.js #increase to 4gb
node --max-old-space-size=5120 index.js #increase to 5gb
node --max-old-space-size=6144 index.js #increase to 6gb
node --max-old-space-size=7168 index.js #increase to 7gb
node --max-old-space-size=8192 index.js #increase to 8gb

dev or serve?

有些同学可能会迷糊（比如曾经的我）：如果你是以前习惯了这个命令pnpm(npm) run serve来运行项目，然后...

image-20220506202511224

我们package.json中scripts脚本根本都没有这个命令啊！

我们换成pnpm run dev（或者懒人写法pnpm dev）就可以成功运行项目。实际上，pnpm run xxx就只是运行package.json里配置的一个脚本。

如果你实在习惯了serve，那就改一下...

image-20220506203153283

这个改写还能帮你在使用npm命令来运行项目的时候，自动帮你以pnpm来运行。我们直接用 pnpm serve把项目跑起来吧！

image-20220506203549060

Vite env

cross-env

在上一小部分，我们看到dev命令中有一个配置项叫cross-env。

作用：当我们使用如NODE_ENV = production来设置环境变量的时候，大多数Windows命令会提示将会阻塞或者异常。或者Windows不支持NODE_ENV=development 的这样的设置方式时，会报错。而cross-env的出现让我们不用再担心平台设置或环境变量的使用。也就是说cross-env能够提供一个设置环境变量的scripts，这样我们就能够以unix方式设置环境变量，并且在windows上兼容。

安排上

pnpm install -D cross-env

我们可以将这个选项使用在dev或者build等命令上

image-20220506210007799

env 环境变量配置

关于Vite中的环境变量与模式，我们可以先阅读一下Vite 官方的说明。

我们可以了解到如下一些信息：

环境变量

Vite在一个特殊的import.meta.env对象上暴露环境变量，它有如下内建变量供我们使用：

  • import.meta.env.MODE: {string} 应用运行的模式。

  • import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由 base 配置项决定。

  • import.meta.env.PROD: {boolean} 应用是否运行在生产环境。

  • import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与import.meta.env.PROD相反)。

.env 文件

Vite使用dotenv从你的 环境目录 中的下列文件加载额外的环境变量：

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

关于这些文件有一些注意点

  • 指定模式的文件（如.env.production）会比通用形式的优先级更高（如.env）。
  • .env类文件会在Vite启动一开始时被加载，当你对这类文件做了改动，请务必重启服务器（才会生效）。
  • .env.*.local文件应是本地的，可以包含敏感变量。你应该将.local添加到你的.gitignore中，以避免它们被git检入。

关于这些文件中的环境变量

  • 加载的环境变量（如.env文件中有一个VITE_PORT变量），会通过import.meta.env以字符串形式暴露给客户端源码。
  • 为了防止意外地将一些环境变量泄漏到客户端，只有以VITE_为前缀的变量才会暴露给经过 vite 处理的代码，所以我们在.env文件中配置需要在客户端源码中使用的环境变量，都以VITE_为前缀。同时VITE_*变量应该不包含任何敏感信息。

环境变量的TS提示

参考。

我们可以在项目根目录下新建types文件，存放我们定义的TS类型。并在该文件夹下新建一个声明全局类型的文件globale.d.ts，在其中声明如下TS类型，帮助我们获得环境变量的TS智能提示。

declare global {
  interface ImportMetaEnv extends ViteEnv {
    __: unknown;
  }

  declare interface ViteEnv {
    VITE_PORT: number;
    VITE_PUBLIC_PATH: string;
    VITE_PROXY_DOMAIN: string;
    VITE_PROXY_DOMAIN_REAL: string;
    VITE_ROUTER_HISTORY: string;
    VITE_LEGACY: boolean;
  }
}

export {};

注意：一定要加上export {}，这样才能将global.d.ts视为一个模块去处理，而非全局文件。声明的类型需要被declare global包裹，作为全局定义，即在项目中可以不需要import就能够使用到这里面定义的类型。

mode（模式）

我们需要那些模式，建立什么.env文件呢？

  • 一般我们都会建立一个通用的.env文件，通常会放置本地服务区运行的端口、项目 title 等。
  • 而默认情况下，开发服务器 (dev命令) 运行在development(开发) 模式，而build命令则运行在production(生产) 模式。
  • 项目在本地开发完后，你需要进行线上测试，这时候你可能希望有一个类似生产的环境--staging（预发布/预上线）模式。

至此，我们开始为我们的项目建立 4 个.env文件，示例如下：

.env

# 项目本地运行端口号，项目默认为3000
VITE_PORT = 7755

.env.development

# 项目本地运行端口号
VITE_PORT = 7755

# 开发环境读取配置文件路径
VITE_PUBLIC_PATH = /

# 开发环境代理
VITE_PROXY_DOMAIN = /api

# 开发环境路由历史模式
VITE_ROUTER_HISTORY = "hash"

# 开发环境后端地址（假地址）
VITE_PROXY_DOMAIN_REAL = "http://127.0.0.1:3000"

.env.production

# 线上环境项目打包路径
VITE_PUBLIC_PATH = /

# 线上环境路由历史模式
VITE_ROUTER_HISTORY = "hash"

# 线上环境后端地址（发布前请修改）
VITE_PROXY_DOMAIN_REAL = ""

# 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false
VITE_LEGACY = false

.env.staging

# 预发布需要类似生产的行为 https://cn.vitejs.dev/guide/env-and-mode.html#modes
NODE_ENV=production

VITE_PUBLIC_PATH = /

# 线上环境路由历史模式
VITE_ROUTER_HISTORY = "hash"

# 线上环境后端地址（预发布前请修改）
VITE_PROXY_DOMAIN_REAL = ""

# 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false
VITE_LEGACY = false

预发布 build 补充

进行预发布时，我们需要build（构建）我们要发布的包。Vite官方给我们设定的命令为vite build --mode staging，另外我们再给这个命令配置下cross-env，以适配环境。

同时在每次build时，如果根目录下有之前build过得dist文件，我们应该先把他删了。以前我们可能会使用rm -rf来执行这个动作，现在我们用更高级点的node插件rimraf，它是以包的形式对rm -rf进行了包装，不管文件夹是否为空，都能帮我们删除。

先安装一下

pnpm install rimraf -D

"build:staging": "rimraf dist && cross-env vite build --mode staging"

顺带提一下build脚本命令

我们使用Vite构建的vue-ts项目，帮我们自动生成的build脚本是这样的

"build": "vue-tsc --noEmit && cross-env vite build"

vue-tsc是什么？其实就是在打包的时候进行ts校验，它甚至会把你的node_modules文件也校验了。我们可以给vue-tsc加上--skipLibCheck参数，来跳过node_modules的检测。但是，我选择死亡（删除vue-tsc），个人感觉这个校验好像没太大必要 hhhhhh。

修改一下：

"build": "rimraf dist && cross-env vite build"

最后，打个包试试看。。。

image-20220509172826098

avatar
文章
阅读
粉丝