自己发布的npm包，本地测试有问题，不知道该如何解决

Question

自己做的npm 包测试

hello.vue

<template>
  <div id="content" class="hello">
    <h1>{{msg}}</h1>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data() {
    return {
      msg: '欢迎使用本公司产品！'
    }
  }
}

</script>

index.js

import Hello from '@/components/Hello.vue'


Hello.install = function(Vue) {
  Vue.component(Hello.name, Hello);
};


export default Hello

webpack配置

module.exports = {
  entry: {
    app:process.env.NODE_ENV === 'production'?'./src/index.js':'./src/main.js'
  },
  devtool:  false,
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/dist/',
    filename: 'hello.min.js',
    library: 'hello',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    }
  },
  ...
  ...
}

npm pack 打包后生成 hello-1.0.0.tgz

在新的项目中引入该包 npm i <包的路径>

新项目代码

demo.vue

<template>
  <div id="content">

    <my-hello></my-hello>
  </div>
</template>
<script>
import hello from 'hello'
export default {
  name: 'hello',
  components:{
    'my-hello':hello
  },
  data() {
    return {
      
    }
  },
  created() {
    console.log('hello',hello)
  }
}

</script>

打印出来的数据

为什么会报这种错误，页面渲染不出来该组件，是打包该组件的时候出了问题吗

Answer 1

可以参照下elmentui组件封装