首页 / 前端 / 文章

vite 的配置文件详解

前端 潘老师 原 5个月前 (12-08) 143 ℃ (0) 扫码查看

本文主要讲解关于vite 的配置文件详解相关内容，让我们来一起学习下吧！

vite 的配置文件

vite 的配置文件为 vite.config.js，在文件中需要导出一个对象，比如：

// vite.config.js 文件中
export default {
    optimizeDeps: {
        exclude: ["lodash-es"], // 当遇到 lodash-es 这个依赖之后，不进行依赖与构建
    }
}

配置文件中的代码提示

如果在 WebStorm 中进行开发，在 vite 配置文件 vite.config.js中，有比较好的语法提示，可以直接导出一个配置对象。但是在 vscode 中没有配置的代码提示，可以通过下面的方式来获取较好的语法提示：

方式一：导入 defineConfig 方法

import {defineConfig} from "vite";

export default defineConfig({
    optimizeDeps: {
        exclude: ["lodash-es"]
    }
})

defineConfig在方法的参数中指定了类型，所以编译器知道当前参数的类型，从而可以获取到较好的提示。defineConfig定义如下，：

declare function defineConfig(config: UserConfig): UserConfig;

方式二：指定对象的类型：

/** @type import("vite").UserConfig */
const viteConfig = {
    optimizeDeps: {
        exclude: []
    }
}
export default viteConfig;

或者采用 vite 推荐的写法

/** @type import("vite").UserConfig */
export default {
    optimizeDeps: {
        exclude: []
    }
}

不同开发环境的配置

在使用 webpack 时，通过不同的配置文件来设置不同的环境的配置，配置文件的名称如下：

  • webpack.dev.config
  • webpack.prod.config
  • webpack.base.config

类似于 webpack，vite 可以通过在项目中添加不同的配置文件，来设置不同的环境的配置：

  • vite.base.config.js 基础配置
  • vite.dev.config.js 开发环境的配置
  • vite.prod.config.js 生产环境的配置
  • vite.config.js 此文件中的配置为最终配置

如下，我们可以在不同的文件中导出不同的配置：

// 在 vite.base.config.js 中
import {defineConfig} from "vite";

export default defineConfig({
    // ... base 中的配置
});

// 在 vite.dev.config.js 中
import {defineConfig} from "vite";

export default defineConfig({
    // ... dev 中的配置
});

// 在 vite.prod.config.js 中
import {defineConfig} from "vite";

export default defineConfig({
    // ... prod 中的配置
});

在 vite.base.config.js、vite.dev.config.js、 vite.prod.config.js 等配置文件中分别设置对应的配置之后，在vite.config.js文件中，就可以通过 defineConfig来根据不同的环境来返回不同的配置。此时需要在 defineConfig 方法中传入一个函数，函数会可以接收一个配置参数：command，command 的类型为 “build” | “serve”，”build” 表示生成环境的配置，”server” 表示开发环境的配置。

import {defineConfig} from "vite";
import viteBaseConfig from "./vite.base.config";
import viteProdConfig from "./vite.prod.config";
import viteDevConfig from "./vite.dev.config";

// 通过策略模式返回对应的配置
const envResolver = {
    "build": () => {
        console.log("prod");
        // 可以使用下面两种方式
        // return Object.assign({}, viteBaseConfig, viteProdConfig);
        return ({...viteBaseConfig, ...viteProdConfig});
    }, // 注意用括号
    "serve": () => Object.assign({}, viteBaseConfig, viteDevConfig)
}

export default defineConfig(({command}) => {
    // command 的类型为 "build" | "server"
    console.log(`command: ${command}`)
    return envResolver[command]();
})

command的值取决于运行的命令是开发环境还是生产环境，如果命令为yarn vite则为开发环境，yarn vite build则为生成环境。

另外：

在解析 vite.config.js 文件时，是在 node 环境下执行的。node 是使用的 common js 的规范。但是vite.config.js中可以使用 es modules 的导入模式。这是因为 vite 在读取 vite.config.js 的时候，会率先在 node 去解析文件语法，如果发现是 es modules 规范，会直接将 es modules 规范进行替换成 common js 规范。

node 在处理文件时，读出的文件是字符串，然后对语法进行了替换。

vite 环境变量

在平时的开发过程中，代码环境可能分为：

  1. 开发环境
  2. 测试环境
  3. 预发布环境
  4. 灰度环境
  5. 生产环境

在不同的开发环境中，需要的一些配置可能是不同的。比如：

  • 第三方 key：在不同的环境中，使用第三方 key 可能是不同的，就需要根据不同的环境获取不同的值。
  • BaseUrl：在对接后端接口的时候，需要根据不同的环境，请求不同的接口地址。比如：
    1. 生成环境的接口 BaseUrl 为：api.com
    2. 测试环境的接口 BaseUrl 为：test.api.com

这种根据当前代码环境需要产生不同值的变量就叫做环境变量。

vite 和 webpack 使用的都是 dotenv 来处理环境变量。vite 内置了 doteve。dotenv 会自动读取 .env 文件，并解析这个文件中对应的环境变量，并将其注入 node 中的 process 对象下。

比如，可以在 .env 文件中，通过下面的方式来设置环境变量：

APP_KEY = 101

但是 vite 考虑到和其他配置的一些冲突问题，vite 不会将 .env 中的环境变量直接注入到 process 对象下。

dotenv 默认读取的是 .env 文件，可以通过 vite 配置中 envDir 值来修改 dotenv 读取的路径。因为 vite 的配置可能会修改 dotenv 读取的文件路径，所以在defineConfig中，通过 process 还获取不到 .env 中的配置。

export default defineConfig(({command}) => {
  // 此处还无法从 process 中获取到 .env 中设置的环境变量
  return {}
})

envDir：用来配置当前环境变量的文件地址的。dotenv 默认读取的是 .env 文件，可以通过此项配置进行修改。

如果想在 defineConfig中读取到 .env 中的配置，vite 给提供了补偿措施：我们可以使用 loadEnv 方法来手动确认 .env 文件。

loadEnv 方法参数：

  • mode：运行命令来中的 mode 值。比如：yarn dev --mode development，此处的 mode 就为 development。
  • envDir: env 文件的路径。可以通过下面的方式进行指定：
    • process.cwd()：获取 node 执行的进程目录，.env 文件一般存放在项目的根目录下，所以可以通过此方法指定项目根目录下的 .env 文件；
    • 绝对路径：可以直接指定一个绝对路径；
  • prefixes: 文件的前缀，默认值为 .env

传入 defineConfig 的函数中，可以获取到当前的 mode 值：

import {defineConfig, loadEnv} from "vite";

export default defineConfig(({command, mode}) => {
    // process.cwd() 为 node 执行的进程目录
    const env = loadEnv(mode, process.cwd(), "")
    console.log(`env: `, env);
    return {};
})

通过 loadEnv 方法获取到的环境变量中，不仅有 notenv 从 .env 文件中读取的环境变量，也会有 node 服务注入的环境变量。

当调用 loadEnv 时，vite 会执行下面的逻辑处理：

  1. 直接找到项目根目录下的 .env 文件（这是一个通用的配置），并解析文件中的环境变量；
  2. 读取 mode 对应环境下的环境变量：
    1. 将字符串 .env.和传进来的 mode 进行拼接，格式为.env.[mode]，比如：mode 为 development 时，拼接的结果为.env.development，此结果作为指定 mode 下的环境变量文件名；
    2. 根据提供的目录，在对应的文件夹下查找拼接的文件名，并解析文件中的内容，获取对应的环境变量；
  3. 将两个文件中的环境变量进行融合，并且 .env.[mode] 文件中的优先级较高。

可以通过下面的伪代码进行理解：

const baseEnvConfig = 读取 .env 文件，获取其中的配置
const modeEnvConfig = 读取 envDir 目录下的 .env.[mode] 文件，获取其中的配置
// 将两者结合，返回最终的结果
const lastEnvConfig = {...baseEnvConfig, ...modeEnvConfig }

默认情况下：

  • vite 将开发环境取名为 development，在执行 yarn dev 时，等价于 yarn dev --mode development，此时 mode 的值为 development。
  • vite 将生产环境取名为 production，在执行yarn build时，等价于yarn build --mode production，此时 mode 的值为 production。
yarn dev // 等价于 yarn dev --mode development

yarn build // 等价于 yarn build --mode production

所以，在默认情况下，可以通过下面的方式在 .env 中设置环境变量：

  • .env 文件：配置所有环境都需要用到的环境变量
  • .env.development 文件：配置开发环境用到的环境变量。开发环境下，vite 的 mode 的默认值为 development，根据 loadEnv 中拼接文件名的方式.env.[mode]，所以文件名为 env.development。
  • .env.production 文件：配置生产环境用到的环境变量。生产环境下，vite 的 mode 的默认值为 production，根据 loadEnv 中拼接文件名的方式.env.[mode]，所以文件名为 env.production。

在执行yarn vite时，mode 为默认值 development。当有除了 development 和 production 以外的其他开发环境时，可以通过指定 mode 来进行设置，比如：yarn vite --mode test，则 mode 的值为 test，这样就可以读取到 .env.test 文件中的环境变量了。

当然，更好的方式是在 package.json 中配置对应的 scripts："test": "vite --mode test"来指定 mode：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vite --mode test"
  },
}

客户端中获取环境变量

客户端中，vite 会将对应的环境变量注入到 import.meta.env 中。另外 vite 为了防止我们将隐私变量直接注入到 import.meta.env 中，vite 做了一层拦截：默认情况下，如果环境变量不是以 VITE_开头的，vite 就不会注入到客户端中去。

所以，默认情况下，在客户端中使用的环境变量需要设置为以VITE_开头：

// .env.development 中的配置
VITE_APP_KEY = Key_For_Dev
VITE_BASE_URL = http://dev.api.com

// .env.production 中的配置
VITE_APP_KEY = Key_For_Prod
VITE_BASE_URL = http://api.com

在需要使用环境变量的地方，通过 import.meta.env 就可以获取相关的环境变量：

// 默认情况下，只会获取以 VITE_ 开头的环境变量
console.log("VITE_BASE_URL: ", import.meta.VITE_BASE_URL);

如果我们想修改默认导入到客户端中的环境变量的前缀（VITE_），可以通过 envPrefix 进行配置：

import {defineConfig} from "vite";

export default defineConfig({
    // ... 其他配置
    envPrefix: "ENV_", // 配置为：vite 注入到客户端中的环境变量必须以 ENV_ 为前缀
});

修改 .env 文件中设置不同的配置：

// .env.development 中的配置
ENV_APP_KEY = Key_For_Dev
ENV_BASE_URL = http://dev.api.com

// .env.production 中的配置
ENV_APP_KEY = Key_For_Prod
ENV_BASE_URL = http://api.com

就可以在客户端中，获取到以 ENV_为前缀的环境变量：

console.log("ENV_BASE_URL:", import.meta.env.ENV_BASE_URL);

配置文件的总结

在 defineConfig 的配置函数中可以接收到参数有：

  • command：类型为 “build” | “serve”，”build” 表示生成环境，”serve” 表示开发环境
  • mode：运行命令中的 mode 值。比如：yarn vite，获取到的 mode 为默认值 development。

配置项：

  • envPrefix: 配置为 vite 可以注入到客户端中的环境变量的前缀；

在 defineConfig 的配置函数中，可以使用的方法：

  • loadEnv 方法：可以在 defineConfig 的配置中获取到对应的配置

以上就是关于vite 的配置文件详解相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！

版权声明：本站文章，如无说明，均为本站原创，转载请注明文章来源。如有侵权，请联系博主删除。
本文链接：https://www.panziye.com/front/12291.html
喜欢 (0)赏
【请潘老师喝杯Coffee吧！】
分享 (0)

相关文章

用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi，您需要填写昵称和邮箱！

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】