vite对媒体、图片等文件打包处理单独发布到CDN
1. 如果你希望对某几个库进行CDN部署，推荐使用vite-plugin-cdn-import
2.如果你希望对整个项目进行CDN部署，使用vite.config.ts中的base字段即可
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等
// 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的结构
├── assets
│ ├── images
│ │ ├── xxx.png
│ ├── xxx.js
│ ├── xxx.css
├── index.html
└── vite.svg
