如何将多个项目集成到一个应用中？
vue多页面应用
参考文档：www.cnblogs.com/zhang1f/p/1…
多页面应用项目目录结构
项目中如何应用
1.项目中public下新增子应用.html,如下，可以直接复制index.html
2.src下新建pages目录，pages目录下新建子应用的目录，每个目录都有自己独立的views,components,router,store，App.vue和main.js。当然命名可以修改，如果修改的话，记得第三步中vue.config.js中的配置也需要同步修改
3.需要在vue.config.js中增加pages配置，如下
const { defineConfig } = require('@vue/cli-service')
const glob = require('glob')
// glob 是 webpack 安装时依赖的一个第三方模块，该模块允许你使用 * 等符号,
// 例如 lib/*.js 就是获取 lib 文件夹下的所有 js 后缀名的文件
function getEntry () {
const pages = {}
glob.sync('public/*.html').forEach(val => {
console.log('val',val)
const url = val.split('/')[1] //bwf.html
const key = url.split('.')[0]
pages[key] = {
entry: `src/pages/${key}/main.js`, //入口js文件
template: `public/${key}.html`, //入口.html文件
filename: `${key}.html`
}
})
return pages
}
const pages = getEntry();
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,//是否关闭代码监测
css: {
extract: false,
sourceMap: true, // 开启 CSS source maps?
loaderOptions: {
less: {
javascriptEnabled: true
}
}
},
pages,
//上面的方法其实就是批量配置了如下路径:
// pages: {
// index: {
// entry: 'src/pages/index/main.js',
// template: 'public/index.html'
// },
// project1: {
// entry: 'src/pages/project1/main.js',
// template: 'public/project1.html'
// },
// project2: {
// entry: 'src/pages/project2/main.js',
// template: 'public/project2.html'
// }
// }
})
为什么要配置index目录呢，为如果配置了pages选项，访问根路径时，会默认去找pages中名为index的那一项，然后进入其对应的入口文件，挂载对应的根组件，因此我们配置多页面应用时，pages中最好保留一个index项表示主页，否则可能找不到文件。
ok,此时，我们启动项目后，
-
访问
http://localhost:8080/project1，就会访问到我们的子页面（project1.html，入口文件./src/pages/project1/main.js） 页面上显示hash路由 http://localhost:8085/project1#/form/basic -
访问
http://localhost:8080/project2，就会访问到我们的子页面（project2.html，入口文件./src/pages/project2/main.js） 页面上显示hash路由 http://localhost:8085/project2#/，访问那个路由再拼上路径就可以了，比如：http://localhost:8085/project2#/demo
思考：能否配成history路由呢？
微前端
什么是微前端
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
微前端解决了什么问题
微前端首先解决的，是如何解构巨石应用，从而解决巨石应用随着技术更迭、产品升级、人员流动带来的工程上的问题。解构之后还需要再重组，重组的过程中我们就会碰到各种 隔离性、依赖去重、通信、应用编排 等问题。
微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
常见的微前端架构
阿里 [qiankun] qiankun.umijs.org/zh/guide
qiankun的特性
使用qiankun构建微前端的项目实践,参考qiankun.umijs.org/zh/guide/tu…
自己已按照文档实践成功，就不再贴代码了！
qiankun的缺点
qiankun 是目前是社区主流微前端方案。它虽然很完善、流行，但最大的问题就是不支持 Vite。它基于 import-html-entry 解析 HTML 来获取资源，由于 qiankun 是通过 eval来执行这些 js 的内容，而 Vite 中的 script 标签类型是 type="module"，里面包含 import/export 等模块代码， 所以会报错：不允许在非 type="module" 的 script 里面使用 import。
京东micro-app
micro-app并没有沿袭single-spa的思路，而是借鉴了WebComponent的思想，通过CustomElement结合自定义的ShadowDom，将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染。并且由于自定义ShadowDom的隔离特性，micro-app不需要像single-spa和qiankun一样要求子应用修改渲染逻辑并暴露出方法，也不需要修改webpack配置，是目前市面上接入微前端成本最低的方案。
项目实践，参考zeroing.jd.com/micro-app/d…
已实践成功，先不贴代码了！
