在普通HTML页面使用vue-multiselect.js报错，求解决方案

嘿，我看出来你的问题啦！你遇到的语法错误和组件无法正常运行的原因主要有两个：

问题分析 #

• 你没引入Vue的CDN：vue-multiselect是Vue的专属组件，必须依赖Vue才能运行，你的代码里完全没加载Vue，这是核心问题之一。
• 你在普通<script>标签里用了ES模块的import和export default：浏览器默认不支持这种模块化写法，会直接抛出语法错误，这就是控制台报Uncaught SyntaxError: Unexpected identifier的原因。

修复后的完整代码 #

下面是修改后的可运行代码，我标注了关键修改点：

<!-- 1. 先引入Vue的CDN，必须放在vue-multiselect之前 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 2. 引入vue-multiselect的脚本和样式 -->
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">

<!-- 3. 给容器添加id，方便Vue挂载接管 -->
<div id="app">
  <label class="typo__label">Single select</label>
  <multiselect 
    v-model="value" 
    :options="options" 
    :searchable="false" 
    :close-on-select="false" 
    :show-labels="false" 
    placeholder="Pick a value">
  </multiselect>
  <pre class="language-json"><code>{{ value }}</code></pre>
</div>

<script type="text/javascript">
// 4. 移除import，直接创建Vue实例，不用export default
new Vue({
  el: '#app', // 挂载到上面的id为app的容器
  // 5. CDN引入的vue-multiselect已经全局注册了Multiselect组件，无需手动声明
  data () {
    return {
      value: '',
      options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
    }
  }
})
</script>

关键修改说明 #

1. 添加Vue依赖：必须先加载Vue，vue-multiselect才能完成初始化。
2. 调整脚本写法：普通HTML页面里用全局Vue实例的方式，而非ES模块语法，这样浏览器能正常解析执行。
3. 挂载Vue实例：给容器加id="app"，通过el: '#app'让Vue接管这个区域的渲染逻辑。
4. 全局组件使用：CDN引入的vue-multiselect会自动把Multiselect注册为全局组件，无需再手动在components里声明。

这样修改后，你的多选组件就能正常运行啦！

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