通过vue cli命令打包发布组件

功能描述

把某个系统中的几个vue页面需要供给多个系统使用，所以需要对公共的vue页面进行打包发布到npm仓库，其他系统工程通过npm install导入进行使用

工程示例

|-- src
|   |-- App.vue                      		# 根组件
|   |-- main.js                            # 入口js文件
|   |-- api 								   #  接口请求api
|   |-- assets                           # 资源目录
|   |-- components                 # 公共组件
|   |-- route							# 路由
|   |-- store							# store module
|   |-- views							# vue页面视图
|   |-- utils
|	|	|-- request.js               # axios请求
|	|	|-- auth.js					 # 获取cookie

关键代码

在package.json中的关键代码，关键是使用vue-cli-service的target lib命令进行打包
官方文档说明：vue cli的库打包说明

"name": "库的名称",
  "version": "1.0.0",
  "description": "描述",
  "main": "./库的名称.common.js",
  "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name 库的名称 ./src/views/index.js",
  }

在views/index.js中的关键代码，这个地方主要是写一个导出的出口文件

import pageA from './pageA ';

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('../store/module', true, /\.js$/);

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
  const value = modulesFiles(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});
// 使用sotore的手动注册模式
const installStore = function(options = {}) {
  if (!installStore.storeRegistered) {
    // register store
    if (!options.store) {
      console.error('Please provide a store!!');
    } else {
      Object.keys(modules).forEach((key) => {
        options.store.registerModule(key, modules[key]);
      });

      installStore.storeRegistered = true;
    }
  }
};
// 导出store的挂载和vue页面
export { installStore, pageA };

打包

打包配置，在vue.config.js文件中加入下面的代码配置
需要把package.json文件copy至打包后的dist文件夹，这样才能执行npm publish命令

css: { extract: false },  // 把css文件也打入common.js的文件中
.........
configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: [new CopyWebpackPlugin([{ from: './package.json', to: `${__dirname}/dist` }])]
  },

在进行本地调试完成之后，进行打包

执行 npm run lib
打包完之后的文件
|-- dist
|	|--demo.html
|	|--xxx.common.js
|	|--xxx.umd.js
|	|--xxx.umd.min.js
|	|--package.json

本地调试

把打包出来的xxx.common.js文件copy至需要调试的工程包中

在main.js中挂载组件中的store
import store from './store'
import { installStore } from './xxx.common.js'
// 挂载store
installStore({storeRegistered: false,store: store})

在路由中引入页面

组件同步加载方式
import { pageA } from './xxx.common.js';
const constantRoutes = [
{ path: '/xxx', meta: { title: 'xxx', noCache: true }, component: pageA , hidden: true },
]

组件异步加载方式
async function getPageA(){
  const  { pageA } = await import('./xxx.common.js');
  return pageA ;
}
const constantRoutes = [
{ path: '/xxx', meta: { title: 'xxx', noCache: true }, component: getPageA, hidden: true },
]

发布

调试完成之后，打包，执行npm publish命令发布包至npm仓库中
引入方式，把上一步的本地调试的from './xxx.common.js’换成 from '组件名称’即可