vue-cli创建的vue项目import导入umd模块报错问题的解决办法

通过vue-cli创建的vue项目中有一些通用的模块和组件，希望通过vue-cli-service build --target lib --name index [entry]打包成公共的包供其它项目使用。

问题

打包过程一切正常，但其它项目希望直接通过引入打包好的包import xxx from '../lib/index.umd.js'，这个时候就会出现无法解析的错误问题。

而通过npm publish后再通过npm install [name]安装引用一点问题都没有。

解决方案

这里需要用到babel插件 @babel/plugin-transform-modules-umd

npm install --save-dev @babel/plugin-transform-modules-umd

然后在babel.config.js配置这个plugin

module.exports = {
  plugins: [
    '@babel/plugin-transform-modules-umd' // 添加这行配置
  ]
}