vite-plugin-inject-externals

npm install --save-dev vite-plugin-inject-externals

// vite.config.js
import injectExternals from 'vite-plugin-inject-externals'

export default {
  plugins: [
    injectExternals({
      // 默认 'head-prepend'
      // 自定义注入位置将会替换index.html中的对应文本
      injectTo: '<!-- Custom placeholder for vite plugin inject externals -->',
      modules: [
        {
          name: 'vue',
          global: 'Vue',
          path: 'https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js'
        },
        {
          name: 'axios',
          global: 'axios',
          // 如果有name和global，但是没有path和htmltag，会直接替换全局变量，但是不注入script标签
          // path: 'https://cdn.jsdelivr.net/npm/axios@0.22.0/dist/axios.min.js'
        },
        {
          name: 'md-editor-v3',
          global: 'MdEditorV3',
          path: 'https://cdn.jsdelivr.net/npm/md-editor-v3@1.5.0/lib/md-editor-v3.umd.js',
          injectTo: '<!-- example2 -->'
        },
        // 如果有path, 但是没有global, 会注入link标签
        {
          name: 'md-editor-v3/lib/style.css',
          // 如果有name，但是没有global，会删除掉name的导入，仅适用于裸导入(import 'md-editor-v3/lib/style.css')
          path: 'https://cdn.jsdelivr.net/npm/md-editor-v3@1.5.0/lib/style.css',
        }
      ]
    })
  ],
}

// dev
import { createApp } from 'vue'
import axios from 'axios'
import MdEditorV3 from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'

createApp()
axios()
console.log(MdEditorV3)

// build
Vue.createApp()
axios()
console.log(MdEditorV3)

<!-- 注入CDN链接 -->
<script type="text/javascript" src="https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js"></script>

// vite.config.js
import injectExternals from 'vite-plugin-inject-externals'

export default {
  plugins: [
    injectExternals({
      // 默认 'head-prepend'
      // 自定义注入位置将会替换index.html中的对应文本
      injectTo: '<!-- Custom placeholder for vite plugin inject externals -->',
      modules: [
        {
          name: 'vue',
          // 当导入方式是裸导入时(import 'md-editor-v3/lib/style.css')，并且有name('md-editor-v3/lib/style.css')但是没有global，会删除导入
          // 当导入方式不是裸导入时，并且有name和global，会替换全局变量
          global: 'Vue',
          // 有path时，如果name和global, 会注入script标签
          // 有path时, 如果没有global, 会注入link标签
          path: 'https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js',
          // 自定义html标签，优先级比path高
          htmlTag: {
            tag: 'script',
            attrs: {
              type: 'text/javascript',
              crossorigin: '',
              src: 'https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js'
            }
          },
          // 如果module没有injectTo, 默认上层的injectTo
          injectTo: '<!-- Custom1 -->'
        }
      ]
    })
  ],
}