vue实现vue组件打包并动态引入远程组件

我用的是命令行方式打包vue组件成js和css。

在package.json的scripts中，定义命令方式，例如build:custom，它的值是

"vue-cli-service build --target lib --name myLib src/common/components/myLib/lib.js"

这样，当使用cmd到根目录以后，输入npm run build:custom，它会读取src/common/components/myLib/lib.js这个js文件，然后打包成myLib.umd.js和myLib.css。

如果不想带着css（推荐不带），就在vue.config.js中加入：

module.exports = {
  css: { extract: false }
}

关于lib.js文件，需要这样写：

export { default as AAA } from './AAA';
export { default as BBB} from './BBB';
export { default as CCC } from './CCC';
export { default as DDD} from './DDD';

这样就可以将同目录下的四个组件打包。

打包后的js和css如果想在前端引入，需要上传到后端（我用的springboot）的resources/static目录下，而且还要在配置文件配一下：