问题描述

今天尝试着自己编写vue插件，在测试的时候没问题可以正常显示，然后我发到npm上去引入项目时发现用不了，找了很久也没找到解决办法

问题出现的环境背景及自己尝试过哪些方法

不能正常使用

报错 [Vue warn]: Unknown custom element: <hello> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

import Vue from 'vue'
import App from './App.vue'
// webpack打包之后的代码
import test from 'chsm-test2'// 或者import test from 'chsm-test2/dist/index.js'

Vue.config.productionTip = false
Vue.use(test)

new Vue({
  render: h => h(App),
}).$mount('#app')

可以正常使用

import Vue from 'vue'
import App from './App.vue'
// 源代码
import test from 'chsm-test2/src/index'

Vue.config.productionTip = false
Vue.use(test)

new Vue({
  render: h => h(App),
}).$mount('#app')

相关代码

webpack配置

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Hello Vue',
            template: './src/index.html',
        })
    ]
}

main.js

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

const components = [
    Hello
]

const MyPlugin = {
    install(Vue, options) {
        components.forEach(v => {
            console.log(v.name)
            Vue.component(v.name, v)
        })
    }
}

export default MyPlugin

package.json

{
  "name": "chsm-test2",
  "version": "0.1.1",
  "main": "dist/index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "dependencies": {
    "vue": "^2.5.21"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14",
    "webpack-merge": "^4.1.5"
  }
}