如何通过URL导入模块？Vue应用中使用CDN引入npm包的方法咨询

前置操作 #

首先将包的CDN地址引入到项目入口HTML文件中，需要放在Vue资源的引入顺序之后，推荐放在<body>标签末尾：

<script src="https://cdn.jsdelivr.net/npm/my-package@1.1.0/dist/my-package.umd.min.js"></script>

UMD格式的包引入完成后会自动挂载到浏览器window全局对象上，通常全局变量名和包名对应（比如示例的my-package对应的全局变量一般为MyPackage，如果不确定可以引入后在浏览器控制台打印window对象查找对应属性）。 #

场景1：无构建工具，直接在HTML中使用Vue #

直接在Vue实例逻辑中调用全局挂载的对象即可：

// Vue3 示例
const app = Vue.createApp({
  setup() {
    // 直接调用包提供的方法
    const data = MyPackage.getSomething()
    return { data }
  }
})
// 如果该包是Vue插件，直接注册即可
app.use(MyPackage)
app.mount('#app')

// Vue2 示例
new Vue({
  el: '#app',
  created() {
    const data = MyPackage.getSomething()
  }
})
// 插件注册
Vue.use(MyPackage)

场景2：使用Vite/Webpack等构建工具的工程化Vue项目 #

需要先在构建配置中声明该包为外部资源，避免构建时重复打包：

Vite 项目配置（vite.config.js） #

import { defineConfig } from 'vite'
export default defineConfig({
  build: {
    rollupOptions: {
      external: ['my-package'],
      output: {
        globals: {
          'my-package': 'MyPackage' // 和全局挂载的变量名保持一致
        }
      }
    }
  }
})

Vue CLI/Webpack 项目配置（vue.config.js） #

module.exports = {
  configureWebpack: {
    externals: {
      'my-package': 'MyPackage' // 和全局挂载的变量名保持一致
    }
  }
}

配置完成后，项目中可以保持原来npm安装时的引入用法，无需修改业务代码：

import MyPackage from 'my-package'
// 按需引入方法也可以正常使用
import { doSomething } from 'my-package'

内容的提问来源于stack exchange，提问作者Sagar Jajoriya