Vite + Vue3 使用 cdn 引入依赖，并且把外部 css、js 文件内联引入

安装插件

pnpm i element-plus echarts axios lodash -S

在 vite.config.js 引用

注意事项：element-plus 不能在 vite.config.js 中使用按需加载，需要在 main.js 中全局引入；

import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// 引入 vite-plugin-cdn-import 插件
import { Plugin as importToCDN } from 'vite-plugin-cdn-import'const pathSrc = resolve(__dirname, 'src')
// https://vitejs.dev/config/
export default defineConfig({// 打包base访问地址，和webpack 的base一样，默认 ./ 就好了base: './',plugins: [vue(),// 配置 CDNimportToCDN({modules: [{name: 'vue',var: 'Vue',path: 'https://cdn.jsdelivr.net/npm/vue@3.5.10/dist/vue.global.min.js'},{name: 'element-plus', // 依赖名称,var: 'ElementPlus', // 全局变量名path: 'https://cdn.jsdelivr.net/npm/element-plus@2.8.4/dist/index.full.min.js', // CDN 链接css: 'https://cdn.jsdelivr.net/npm/element-plus@2.8.4/dist/index.min.css' // 依赖有css就填，没有就去掉这个},{name: 'axios',var: 'axios',path: 'https://cdn.jsdelivr.net/npm/axios@1.7.7/dist/axios.min.js'},{name: 'echarts',var: 'echarts',path: 'https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js'},{name: 'lodash',var: '_',path: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js'}]}),{name: 'inline-js-css',apply: 'build', // 仅在构建阶段生效enforce: 'post', // 在其他插件之后执行generateBundle(outputOptions, bundle) {for (const fileName in bundle) {const asset = bundle[fileName]// 获取HTML文件const htmlFile = bundle['index.html']if (!htmlFile) return// 删除原始JS/CSS文件代码if (fileName.endsWith('.html')) {// console.log(asset)// 删除原始JS/CSS文件引入htmlFile.source = htmlFile.source.replace(/<script type="module".*<\/script>/g,'')htmlFile.source = htmlFile.source.replace(/<link rel="stylesheet".*\.css">/g,'')} else if (fileName.endsWith('.js')) {// 将JS内联到HTML文件中htmlFile.source += `\n<script>\n${asset.code}\n</script>\n`// 删除原始JS文件delete bundle[fileName]} else if (fileName.endsWith('.css')) {// 将CSS内联到HTML文件中htmlFile.source += `\n<style>\n${asset.source}\n</style>\n`// 删除原始CSS文件delete bundle[fileName]}}}}],server: {host: '0.0.0.0',.......}
})

main.js 引入

CDN 引入只有在 build 打包出来的才是 CDN 引入，本地开发走的还是 NPM 本地包引入，所以先使用 NPM 方式引入

import { createApp, provide } from 'vue'
import ElementPlus from 'element-plus'
import './style.scss'
import App from './App.vue'createApp(App).provide('global', {theme: 'theme-white'}).use(ElementPlus).mount('#app')