vite对媒体、图片等文件打包处理单独发布到CDN

1. 如果你希望对某几个库进行CDN部署，推荐使用vite-plugin-cdn-import

2.如果你希望对整个项目进行CDN部署，使用vite.config.ts中的base字段即可

1
2
3
4
5
6
7
8
9
10
11
import { defineConfig } from 'vite';

 
export default defineConfig(({ mode }) => {
  const isProduction = mode === 'production';
  const cdnDomain = isProduction ? process.env.VITE_CDN_DOMAIN : '/';
 
  return {
    base: cdnDomain,
  };

3.如果你希望只对某些文件进行CDN部署，比如图片，MP4等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// vite.config.ts
// https://vitejs.dev/config/
export default ({ mode }: ConfigEnv): UserConfigExport => {
  return {
	//......其他配置

    build: {

      rollupOptions: {
        output: {
          assetFileNames: (chunkInfo) => {
            // 用后缀名称进行区别处理
            // 处理其他资源文件名 e.g. css png 等
            if (
              chunkInfo.name?.endsWith('.webm') ||
              chunkInfo.name?.endsWith('.png') ||
              chunkInfo.name?.endsWith('.jpg') ||
              chunkInfo.name?.endsWith('.gif')
            ) {
              return `assets/images/[name].[ext]`;
            }

            return `assets/[name].[hash].[ext]`;
          },
        },
      },
    },
    experimental: {
      renderBuiltUrl(filename: string) {
        if (
          filename.endsWith('.webm') ||
          filename.endsWith('.png') ||
          filename.endsWith('.jpg') ||
          filename.endsWith('.gif')
        ) {
          const name = filename.replace('assets/images/', '');
          return `https://cdnURL/images/${name}`;
        }

        return filename;
      },
    },
  };
};

打包后dist的结构

1
2
3
4
5
6
7
├── assets
│   ├── images
│   │   ├── xxx.png
│   ├── xxx.js
│   ├── xxx.css
├── index.html
└── vite.svg