把某个系统中的几个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 '组件名称’即可