Vite的学习之旅（二）：基本配置和环境变量配置

GitHub项目地址：seapack-hub/studyVite (github.com)

一、Vite的基本配置

创建配置文件

在项目根目录下新建vite.config.js文件，其最基础的配置如下：

javascript 复制代码

// vite.config.js
export default {
  // 配置选项
}

当以命令行的方式运行vite时，Vite会自动解析项目根目录下名为vite.config.js的配置文件（也支持TS）。

添加智能提示

Vite提供了defineConfig工具函数，来辅助我们编码时获取提示。

javascript 复制代码

import {defineConfig} from 'vite';

export default defineConfig({
  //配置选项
})

这样我们在编写配置时它就会进行智能提示。

不同环境的配置（开发，生产）

在实际开发过程中，配置文件可能需要根据环境的不同（开发环境，生产环境），来进行不同的配置。Vite提供的工具函数defineConfig可以接收一个函数，函数的参数是一个对象，对象中有一些属性可以帮助我们对不同的环境做一些判断。

javascript 复制代码

export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  if (command === 'serve') {
    return {
      // dev 独有配置
    }
  } else {
    // command === 'build'
    return {
      // build 独有配置
    }
  }
})

需要注意的是，在 Vite 的 API 中，在开发环境下 command 的值为 serve，而在生产环境下为 build。

基础配置引入优化

随着项目的增大，需要配置的属性过多，之前的配置方式可能有些不便，可以将不同环境的配置分开为单个文件进行配置。比如说创建基础配置文件：vite.base.config.js，开发环境配置文件：vite.de.config.js，生产环境配置文件：vite.prod.config.js 。之后将这些文件导入vite.config.js文件中，通过策略模式来引用。

javascript 复制代码

import { defineConfig } from 'vite';

import viteBaseConfig from './vite.base.config';
import viteDevConfig from './vite.dev.config';
import viteProdConfig from './vite.prod.config';

//策略模式
const envResolver = {
    "build":()=>{
        console.log('生产模式配置');
        return {...viteBaseConfig,...viteProdConfig}
    },
    "serve":()=>{
        console.log('开发模式配置');
        return {...viteBaseConfig,...viteDevConfig}
    }
}
export default defineConfig(({command})=>{
    return envResolver[command];
})

二，环境变量配置

基本使用

环境变量一般都是存放在 .env文件中的，之前使用webpack构建工具时，构建工具会自动加载.env文件，因为webpack会先打包然后再启动服务器。.env文件样本如下：

但Vite默认是不加载 .env文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个。Vite提供了loadEnv函数来加载指定的.env文件。如下所示：

javascript 复制代码

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite 配置
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})

loadEnv方法的参数

在vite中对环境变量处理依赖于dotenv第三方库，vite中内置了这个第三方得库，dotenv会读取.env文件，并解析这个文件中对应的环境变量，然后将其注入process对象下。

先在项目目录下新建一个.env文件，并设置一个环境变量 APP_KEY 。

在vite.config.js中使用loadEnv加载.env文件。loadEnv方法接收三个参数

mode：模式：
envDir：环境变量配置文件所在目录
prefix：环境变量前缀

mode参数

第一个参数mode表示模式的意思，开发环境默认字段是 development ,生产环境默认字段是 production。它是根据我们输入的命令来判断的。

在vite.config.js中编码，输出mode。

使用 yarn dev 运行：打印的值为 development。

其实 yarn dev 是一种简写方式，完整的写法为 yarn dev --mode development，如果省略的话它就会自动补齐。development就是传过去的参数，相当于mode是形参，development是我们传过去的实参。

实参是可以变动的，比如将实参改为test，然后执行 yarn dev --mode test，mode的值就为传入的test。

同理，生产环境的命令是 yarn build ，完整写法是 yarn build --mode production

envDir参数

loadEnv方法的第二个参数接收环境变量配置文件所在的目录 ，我们可以通过process对象上的cwd方法快捷的获取文件所在的目录。

prefix参数

第三个参数设置为 ""时，加载所有环境变量。

loadEnv方法的内容

当我们调用loadEnv方法的时候，它会执行以下操作：

直接找到.env文件，并解析其中的环境变量，放入一个对象中
将传进来的mode这个变量的值进行拼接 ，格式如：.env.[mode]，并根据loadEnv第二个参数提供的目录去取对应文件进行解析，将结果放入一个对象中。
后解析的变量会覆盖之前的同名变量

在项目根目录下分别创建 .env.development 文件和 .env.production 文件，并设置环境变量。

然后再vite.config.js中使用loadEnv方法，

以 yarn dev命令运行，此时mode 默认值为 development，loadEnv方法会加载.env文件和.env.development文件。

以 yarn build 命令运行，此时mode 默认值为 production，loadEnv方法会加载 .env 文件和 .env.production文件。

最终，通过loadEnv方法，获取到了配置的环境变量。

环境变量的使用

在服务端可以通过loadEnv的方式获取到环境变量，但在客户端，vite会将环境变量存入import.meta.env中。

在main.js中打印一下：

启动项目，查看控制台输出结果，没有找到环境变量。

其实vite做了一个拦截，为了防止我们将隐私性的变量直接存入import.meta.env中，它规定环境变量不是以VITE开头的，就不会存入客户端中 。

在环境变量前加VITE，查看控制台打印结果：

如果我们想要更改这个前缀，可以使用envPrefix配置。在vite.base.config.js中设置envPrefix的值为ENV，这样就可以把VITE 验证替换成ENV 验证。