编译单个 vue 组件答案

【问题标题】：compile single vue component编译单个 vue 组件
【发布时间】：2021-01-28 12:04:51
【问题描述】：

我已经使用vue create myapp 创建了一个 vue 项目。我在其中创建了几个组件：

src/components/MyFirst.vue
src/components/MySecond.vue

我还通过以下方式调整了我的vue.config.js：

module.exports = {
  css: {
    extract: false,
  },
  configureWebpack: {
    optimization: {
      splitChunks: false
    },
    output: {
      filename: '[name].js',
      chunkFilename: '[name].js'
    }
  }
}

这样yarn build 创建一个文件app.js

现在我想使用我在静态 HTML 文件中定义的组件：

<html lang="de">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>
    <script src="/static/app.js"></script>
    <title>MyPage<title>
</head>
<body>
    <my-comp></my-comp>
</body>

我必须做些什么才能实现这一目标？
有没有办法将其编译为每个组件一个js 文件？

【问题讨论】：

导入您在 HTML 页面的脚本部分创建的组件。 import { componentName } from filePath
谢谢，不幸的是它不起作用。

标签： vue.js vuejs2

【解决方案1】：

Vue CLI 支持library target，您可以在其中注册导入的组件定义；或web component target，其中组件在导入时自动注册（允许您像示例中一样放入组件）。

编辑package.json 中的build NPM 脚本，添加以下参数：

// package.json
{
  "scripts": {
    "build": "vue-cli-service build --target wc --name my-component src/components/MyComponent.vue"
  }
}

生成的dist/demo.html 显示示例用法：

<script src="https://unpkg.com/vue"></script>
<script src="./my-component.js"></script>
<my-component></my-component>

【讨论】：