如何在非CLI的纯JS Vue项目中导入Vue Multiselect

在纯HTML引入Vue和Vue Multiselect CDN的场景下，不能使用Vue CLI中的import语法——因为浏览器原生ES模块不支持'vue-multiselect'这类裸模块标识符，这就是你遇到Uncaught TypeError: Error resolving module specifier "vue"的原因。

解决步骤 #

1. 确保CDN引入顺序正确
   必须先引入Vue，再引入Vue Multiselect，组件依赖Vue全局实例才能正常初始化：

   <script src="../assets/js/vue.js"></script>
   <script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
   

2. 通过全局变量注册组件
   CDN引入的Vue Multiselect会挂载到window.VueMultiselect全局变量，直接在Vue实例中注册即可，无需import：

   修改你的user-list.js代码：

   new Vue({
     el: '#app',
     // 注册全局组件
     components: {
       multiselect: VueMultiselect
     },
     data() {
       return {
         value: [], // 绑定多选选中值
         options: [ // 初始化选项列表
           { name: 'JavaScript', code: 'js' },
           { name: 'Vue.js', code: 'vue' }
         ]
       }
     },
     methods: {
       // 实现标签新增逻辑
       addTag(newTag) {
         const tag = {
           name: newTag,
           code: newTag.toLowerCase().replace(/\s+/g, '-')
         }
         this.options.push(tag)
         this.value.push(tag)
       }
     }
   })
   

3. 移除脚本的type="module"声明
   我们用全局变量方式使用Vue和组件，不需要ES模块模式，修改HTML中的脚本标签：

   <script src="../assets/js/user-list.js"></script>
   

为什么原来的import方式无效？ #

Vue CLI项目依赖Webpack等打包工具，会将import语法解析为模块依赖并打包；而纯HTML环境下，浏览器只能识别相对/绝对路径的模块，无法解析'vue-multiselect'这类裸模块名，因此报错。

内容的提问来源于stack exchange，提问作者Sanaz Baghban