将Vue组件导出为npm模块时出现组件挂载失败报错求助

我之前也碰到过类似的问题，这个报错本质上是你的组件构建产物没处理好模板编译，或者webpack配置没搭对，导致别的项目导入后Vue找不到组件的渲染逻辑。来一步步给你分析修复：

首先是Webpack配置的核心问题 #

你的webpack配置漏了两个关键环节：一是没处理Vue模板的编译支持，二是没设置正确的模块导出格式，导致其他项目没法正确识别组件对象。

修复后的Webpack配置代码 #

const webpack = require('webpack');
const path = require('path');
const utils = require('./utils');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // vue-loader v15+必须添加这个插件

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

var config = {
  entry: path.resolve(__dirname + '/../src/components/index.js'),
  output: {
    path: path.resolve(__dirname + '/../dist/timer-comp/'),
    filename: 'timer-component.js',
    library: 'TimerComponent', // 给你的库指定一个全局名称
    libraryTarget: 'umd', // 支持CommonJS、AMD、全局变量等多种导入方式
    umdNamedDefine: true
  },
  resolve: {
    extensions: ['.vue', '.js', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 指定使用带编译器的Vue版本（也可以选择预编译模板）
    }
  },
  module: {
    rules: [
      { test: /\.vue$/, loader: 'vue-loader' },
      { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }
    ]
  },
  plugins: [
    new VueLoaderPlugin(), // 必不可少，否则vue-loader无法正常工作
    new webpack.LoaderOptionsPlugin({ minimize: true, debug: false }),
    new webpack.optimize.UglifyJsPlugin({ minimize: true, sourceMap: false, mangle: true, compress: { warnings: false } })
  ]
};

module.exports = config;

然后是组件导出的小优化 #

你的入口文件导出方式没问题，但改成默认导出会让其他项目的导入更便捷：

修改src/components/index.js #

import TimerComponent from './timer-component';

// 同时支持默认导入和命名导入，兼容不同项目的使用习惯
export default TimerComponent;
export { TimerComponent };

别忘了配置package.json的main字段 #

在你的npm模块的package.json里，必须指定main字段指向构建后的产物文件，否则其他项目无法正确找到你的组件：

{
  "main": "dist/timer-comp/timer-component.js"
}

最后说下报错的根源 #

• 要么是Vue在运行时找不到组件的render函数，且没有编译器去编译模板（比如你用了Vue的纯运行时版本），就会抛出这个错误；解决思路要么预编译模板为render函数，要么使用带编译器的Vue版本。
• 另外你的webpack没设置libraryTarget，导致模块导出格式不符合规范，其他项目导入后拿到的不是正确的组件对象，自然无法完成挂载。

按上面的步骤改完，重新构建并发布你的npm包，再到其他项目里导入应该就能正常使用啦～

内容的提问来源于stack exchange，提问作者Rees