将项目中打包后生产文件替换静态资源地址为cdn地址
- 几乎零配置,使用
vite
outDir
路径,替换里面的资源地址为cdn地址
适用 vite 5 的 ESM 版本:
npm i -D vite-plugin-cdn-link@latest
- 在 vite.config.js 中注册本插件
- 设置插件参数
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginCdnLink from 'vite-plugin-cdn-link'
const options = {
cdnPrefix: 'https://cdn.example.com/static',
staticPrefix: 'static',
ignore: '',
enabled: true
}
const prod = process.env.NODE_ENV === 'production'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vitePluginCdnLink(options)]
})
- 打包发布生产代码
pnpm run build
插件将会在打包完成后,即可把静态资源文件上传到cdn里。
配置名 | 说明 | 类型 | 默认值 |
---|---|---|---|
cdnPrefix | CDN地址前缀,以http或者https或者//开头 | string | |
staticPrefix | public静态资源前缀,默认static,前后无需夹/,如果是多级目录前缀,则写为“static/cdn”,意思是将public下static里面cdn的资源都变成cdn链接 | string | |
ignore | 文件及文件夹忽略规则。如果你使用空字符串 '' ,将不会忽略任何文件 |
string[]或者string | '' |
enabled | 是否启用本插件 | boolean | true |