在 Vite 中配置所有静态资源文件和按需加载文件使用自己的 CDN 域名

原创

已于 2023-09-12 19:34:16 修改 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #服务器

于 2023-09-05 12:48:35 首次发布

本文介绍了如何在Vite项目中配置所有静态资源和按需加载文件使用CDN域名，包括创建不同环境的.env文件，使用vite-plugin-cdn-import插件，并根据环境变量设置base和插件配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 Vite 中配置所有静态资源文件和按需加载文件使用自己的 CDN 域名，并且考虑多环境变量的情况，你可以结合使用环境变量和 Vite 插件来实现。

首先，创建不同环境的 `.env` 文件，例如 `.env.development` 和 `.env.production`。

vite-plugin-cdn-import 是一个 Vite 插件，用于将项目中的依赖库从 CDN 引入，以减小打包体积并提高加载速度。它可以帮助你将特定的依赖库从本地引入改为从 CDN 引入。

   cnpm i vite-plugin-cdn-import --save-dev

在 `.env.development` 文件中，设置开发环境的 CDN 域名：

```
VITE_CDN_DOMAIN=/
```

在 `.env.production` 文件中，设置生产环境的 CDN 域名：

```
VITE_CDN_DOMAIN=https://your-cdn-domain.com/
```

然后，在 `vite.config.js` 中，根据环境变量的值来设置 `base` 和配置插件：

// vite.config.js
import { defineConfig } from 'vite';
import cdnImport from 'vite-plugin-cdn-import';

export default defineConfig(({ mode }) => {
  const isProduction = mode === 'production';
  const cdnDomain = isProduction ? process.env.VITE_CDN_DOMA