Question

如何在现有HTML页面中导入组件，下面是示例。我尝试过但没有运气。 `

<html>
<head>
  <script src="//unpkg.com/vue@2.5.13/dist/vue.js"></script>
</head>
  <body>
    <div id="app">
     <my-component></my-component>
    </div>
    <script>
    import mycomponent from './components/mycomponent.vue'
    var vm = new Vue({
      el: '#app',
      components: {
        'my-component': mycomponent
        }
      })
    </script>
   </body>
</head>
</html>

` 导入行说出意外的标识符！这里出了什么问题，请帮忙。

Answer 1

您需要在脚本元素上使用type=module，浏览器会将内联或外部脚本视为ECMAScript模块。以下是您的代码转换方式

<html>
<head> 
  <script src="//unpkg.com/vue@2.5.13/dist/vue.js"></script>
</head>
  <body>
    <div id="app">
     <my-component></my-component>
    </div>
    <script type="module">
    import mycomponent from './components/mycomponent.vue'
    var vm = new Vue({
      el: '#app',
      components: {
        'my-component': mycomponent
        }
      })
    </script>
   </body>
</head>
</html>

您可以在浏览器here

中阅读有关ECMAScript模块的更多信息

浏览器中的ES6模块

1 个答案: