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

1. 安装插件

pnpm i element-plus echarts axios lodash -S

2. 在 vite.config.js 引用

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

import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'


import { Plugin as importToCDN } from 'vite-plugin-cdn-import'

const pathSrc = resolve(__dirname, 'src')

export default defineConfig({
  
  base: './',
  plugins: [
    vue(),
    
    importToCDN({
      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', 
          css: 'https://cdn.jsdelivr.net/npm/element-plus@2.8.4/dist/index.min.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]
          
          const htmlFile = bundle['index.html']
          if (!htmlFile) return
          
          if (fileName.endsWith('.html')) {
            
            
            htmlFile.source = htmlFile.source.replace(
              //g,
              ''
            )
            htmlFile.source = htmlFile.source.replace(
              //g,
              ''
            )
          } else if (fileName.endsWith('.js')) {
            
            htmlFile.source += `n${asset.code}nn`
            
            delete bundle[fileName]
          } else if (fileName.endsWith('.css')) {
            
            htmlFile.source += `n${asset.source}nn`
            
            delete bundle[fileName]
          }
        }
      }
    }
  ],
  server: {
    host: '0.0.0.0',
    .......
  }
})

3. 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')

4. 打包测试

执行打包 命令 npm run build，依赖变为 CDN 引入，外部的 js 文件和 css 文件集成到 index.html 中