如何将 Vue 组件导入脚本标签？答案

【问题标题】：如何将 Vue 组件导入脚本标签？
【发布时间】：2019-01-30 12:42:07
【问题描述】：

我的 Laravel 项目 resources\assets\js\components 中有一些 Vue 组件 (.vue)。我想将组件导入到视图文件.blade.php:

<div id='lol'>
    <some-component></some-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
    import SomeComponent from '.\resources\assets\js\components\some.vue
    new Vue({
        el: '#lol'
    });
</script>

我在控制台中遇到错误：Uncaught SyntaxError: Unexpected identifier import

我不想在 app.js 中注册组件

【问题讨论】：

单个文件.vue 组件必须被编译。您不能只导入它们。这就是 Webpack 使用 vue-loader 的原因
另外，您只能在 JavaScript 模块中使用 import。浏览器对<script type="module"> 的支持目前不是很好
在app.js中编译一堆js文件比较容易

标签： laravel vue.js vue-component

【解决方案1】：

如果您不想使用编译器，可以使用诸如 http-vue-loader 之类的库，它提供了一个函数来执行此操作。

重要提示：库的作者本身不建议将此库用于生产环境。相反，他建议您编译 .vue 文件。

使用 http-vue-loader 库时，您的 sn-p 将如下所示：


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>


<div id='lol'>
   <some-component></some-component>
</div>

<script>
new Vue({
   components: {
      'some-component': httpVueLoader('./resources/assets/js/components/some.vue')
   },
   el: '#lol',

});
</script>

或者，您可以编译并导出您的vue component as a library，然后您可以将其添加到您的项目中。

要将您的组件导出为库，您首先需要为您的组件创建一个入口点，例如：'resources\assets\js\components\index.js'。在此入口点中，您可以全局注册您的组件。

import Vue from "vue";
import Some from "./some.vue"

const Components = {Some};

Object.keys(Components).forEach(name=>{
  Vue.component(name,Components[name])
})


export default Components;

接下来，您需要在 package.json 中定义构建库的构建步骤，该步骤链接到组件的入口点：

"scripts": {
   ...
   "build-bundle" : "vue-cli-service build --target lib --name some ./resources/assets/js/components/index.js",
  ...
},

接下来，调用此构建步骤，例如通过调用 'yarn build-bundle' 或 npm 等效项。

最后，您可以将编译后的组件添加到您的网页中。请注意，您不需要显式包含您的组件，因为您之前已在全局范围内注册了它。另请注意，您需要将 type="module" 属性添加到脚本标签，否则您将无法使用 import 语句。最后，已编译库的输出路径是您的 vue.config.js 中使用的路径。

<div id='lol'>
   <some-component></some-component>
</div>

<script type="module">
import "/<path>/<to>/<compiled>/<library>/some.umd.min.js";

const app = new Vue({
  el: '#lol',
})
</script>

【讨论】：