vue.js - 如何在构建时安装 vue 库的内部组件？

Question

我想构建一个组件并在 node_module 上使用。

这是文件树：

babel.config.js
rollup.config.js
package.json
src/
    index.js
    Sample.vue
    components/
        Inner.vue

babel.config.js：

module.exports = {
  presets: [
    '@vue/app'
  ]
}

rollup.config.js：

import vue from 'rollup-plugin-vue'
import css from 'rollup-plugin-css-only'
import cjs from 'rollup-plugin-commonjs'
import { terser } from 'rollup-plugin-terser'
import fileSize from 'rollup-plugin-filesize'
import { name, version, license } from './package.json'

const input = 'src/index.js'

const banner = `/*!
 * ${name}
 * Version: ${version}
 * License: ${license}
 */`


export default [
  // ESM build to be used with webpack/rollup.
  {
    input,
    output: {
      banner,
      format: 'esm',
      file: 'dist/sample-component.esm.js'
    },
    plugins: [
      cjs(),
      fileSize(),
      css(),
      vue({ css: false })
    ]
  },
  // SSR build.
  {
    input,
    output: {
      banner,
      format: 'cjs',
      file: 'dist/sample-component.ssr.js'
    },
    plugins: [
      cjs(),
      fileSize(),
      css(),
      vue({
        css: false,
        template: { optimizeSSR: true }
      })
    ]
  },
  // Browser build.
  {
    input,
    output: {
      banner,
      format: 'iife',
      name: 'SampleComponent',
      file: 'dist/sample-component.js'
    },
    plugins: [
      cjs(),
      fileSize(),
      css(),
      vue({ css: false })
    ]
  },
  {
    input,
    output: {
      banner,
      format: 'iife',
      name: 'SampleComponent',
      file: 'dist/sample-component.min.js'
    },
    plugins: [
      cjs(),
      fileSize(),
      css(),
      terser(),
      vue({ css: false }),
    ]
  }
]

包.json：

{
  "name": "sample-component",
  "version": "1.0.0",
  "private": true,
  "license": "UNLICENSED",
  "author": "Atousa Darabi",
  "main": "dist/sample-component.umd.js",
  "module": "dist/sample-component.esm.js",
  "unpkg": "dist/sample-component.min.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "rollup -c --environment BUILD:production",
    "lint": "eslint --ext .js,.vue src"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-config-neonblack": "^5.0.1",
    "eslint-plugin-vue": "^5.2.2",
    "rollup": "^1.14.0",
    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-css-only": "^1.0.0",
    "rollup-plugin-filesize": "^6.1.0",
    "rollup-plugin-terser": "^5.0.0",
    "rollup-plugin-vue": "^5.0.0",
    "vue": "^2.6.10",
    "vue-template-compiler": "^2.6.10"
  },
  "peerDependencies": {
    "vue": "^2.5.16"
  }
}

index.js：

export { default as Sample } from './Sample.vue'

示例.vue：

<template>
  <Inner/>
</template>

<script>
import Inner from './components/Inner.vue'

export default{
  name: 'Sample',
  components: 'Inner'
}
</script>

内部.vue：

<template>
  <h1>Inner Component</h1>
</template>

<script>
export default{
  name: 'Inner'
}
</script>

当我将它构建为生产时，它使 dist 文件完全没有错误。但是在另一个项目中安装后，出现错误：

These dependencies were not found:
* components/Inner.vue in ./node_modules/sample-component/dist/sample-component.esm.js
To install them, you can run: npm install --save components/Inner.vue

我如何使它工作？

标签： vue.jsvue-component