pc网站生成手机网站,wordpress 宅谈,嘉兴秀宏建设公司网站,wordpress游戏充值项目背景说明 后台管理部分使用的技术栈是Vue2#xff0c;前台可视化部分使用的技术栈是Vue3 前台可视化项目不是独立存在#xff0c;而是和后台管理项目共享同一个登录页面 微前端的好处
微前端是一种前端架构模式#xff0c;它将大型单体应用程序分解为小的、松散耦合的…项目背景说明 后台管理部分使用的技术栈是Vue2前台可视化部分使用的技术栈是Vue3 前台可视化项目不是独立存在而是和后台管理项目共享同一个登录页面 微前端的好处
微前端是一种前端架构模式它将大型单体应用程序分解为小的、松散耦合的部分每个部分都可以独立开发、测试和部署。微前端的好处如下 增强团队独立性 提高可维护性 提高性能
总之微前端使开发人员可以更容易地构建、维护和扩展大型单体应用程序从而提高了应用程序的质量和可靠性 乾坤方案改造
qiankun - qiankun
主应用改造后台管理
安装乾坤
npm i qiankun
新增配置文件
import { registerMicroApps, start } from qiankunregisterMicroApps([{name: hmzs-big-screen, // 子应用名称entry: //localhost:5173, // 子应用运行服务地址就是npm run dev时的那个地址container: #container, // 挂载容器idcontaineractiveRule: /big-screen // 激活路由(在哪个路由下加载子应用,需要和子应用的路由名称对应)}
])start()
入口文件启动
// 启动微前端配置
import ./registerMicroApp
配置子应用渲染的位置
templatediv idapprouter-view /!-- 子应用挂载节点 --div idcontainer //div
/templatescript
export default {name: App
}
/script
子应用改造前台可视化
说明: qiankun默认不支持vite项目作为子应用需要借助 vite-qiankun 插件进行支持
配置vite-qiankun插件
npm i vite-plugin-qiankun -D
import { fileURLToPath, URL } from node:url
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import qiankun from vite-plugin-qiankunexport default defineConfig({base: /,plugins: [vue(), // 这里的名称要和主应用改造是配置项中的name保持一致qiankun(hmzs-big-screen, {useDevMode: true})],server: {// 防止开发阶段的assets 静态资源加载问题origin: //localhost:5173},resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url)),}}
})
2- 入口文件改造
import { createApp } from vue
import App from ./App.vue
import router from ./router
import { renderWithQiankun, qiankunWindow } from vite-plugin-qiankun/dist/helperimport ./styles/common.scss// 使用乾坤渲染
renderWithQiankun({// 挂载时mount (props) {console.log(mount)render(props)},bootstrap () {console.log(bootstrap)},unmount (props) {console.log(unmount, props)},
})if (!qiankunWindow.__POWERED_BY_QIANKUN__) {render({})
}function render (props {}) {const { container } propsconst app createApp(App)app.use(router)app.mount(container ? container.querySelector(#app) : #app)
} 大屏按钮跳转
div classavatar-wrapperel-button sizesmall plain click$router.push(/big-screen)可视化大屏/el-button!-- 用户名称 --span classname黑马管理员/span
/div 微前端配置易错点
1. 保证子应用已经运行 测试时需要保证子应用项目已经run了起来因为主应用需要从子应用的服务拉取资源 子应用run的服务地址要和主应用中的 entry 选项要严格保持一致注意端口号
2. 准备好挂载容器
作为子应用的挂载节点 也就是 container 容器要准备好否则没有挂载的位置
3. 开发环境修复静态资源的路径
子应用里需要配置一下server选项的origin选项否则加载assets文件夹中的资源会默认寻找主应用下的assets文件夹
server: {// 防止开发阶段的assets 静态资源加载问题origin: //localhost:5173
} 乾坤基础原理说明直接观看拓展视频
1. 基础运行原理 监听路由变化 匹配子应用 加载子应用 渲染子应用
2. 核心代码实现
// 用来加载子应用html并解析
import importHTML from import-html-entry// 重新路由
function rewriteRouter () {// 针对 go/backwindow.addEventListener(popstate, () {loadMicroApp()})// 针对pushStateconst rawPushState window.history.pushStatewindow.history.pushState async (...rest) {rawPushState.apply(window.history, rest)console.log(监听到 pushState 方法)// 加载子应用loadMicroApp()}
}// 加载子应用资源
let _activeMicroApp null
function loadMicroApp () {// 1. 匹配激活路由 并加载子应用htmlconst path window.location.pathnameconst microApps getMicroApp()const microAppConfig microApps.find(app app.activeRule path)_activeMicroApp _activeMicroApp || microAppConfigconsole.log(当前配置, microAppConfig)if (microAppConfig) {// 挂载importHTML(microAppConfig.entry).then(async res {// 2. 获取模版const template res.templateconst container document.querySelector(microAppConfig.container)container.innerHTML template// 2. 获取脚本并执行await res.execScripts()window.__qiankunMount()})} else {// 卸载const container document.querySelector(_activeMicroApp.container)container.innerHTML _activeMicroApp nullwindow.__qiankunUnMount()}
}// 注册子应用配置
let microApps []
function registerMicroApp (configArr) {microApps configArr
}
function getMicroApp () {return microApps
}// 启动方法
function start () {rewriteRouter()
}// 导出通用方法
export {registerMicroApp,start
}
3. 测试使用
主应用配置
// 注册微应用配置
registerMicroApp([{name: big-screen,entry: //127.0.0.1:5500/,container: #container,activeRule: /big-screen}
])start() 子应用配置
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title我是子应用/titlestyle#root {width: 500px;height: 400px;background-color: royalblue;color: #fff;}/style/headbodydiv idrootbutton idbtntoggleColor/button/divscriptconst btn document.querySelector(#btn)const root document.querySelector(#root)btn.addEventListener(click, () {root.style.backgroundColor red})// 模拟生命周期函数function mount () {console.log(mount by 乾坤)}function unMount () {console.log(unMount by 乾坤)}window.__qiankunMount mountwindow.__qiankunUnMount unMount/script
/body/html 实际上线的流程说明 说明前端需要做的事情就是配合发布 确保提交的分支正确分支代码里没有非常明显的错误如代码冲突 因为部署平台要执行打包命令这个打包命令是前端提供的这里要对接好并且打包时的优化要前端自己做 配置环境变量
认识环境变量
概念同一个“变量”的值可以根据不同的环境自动切换与环境相对应的值这样的变量就称之为环境变量 场景项目上线时我们的接口基地址发生了变化由(https://api-hmzs.itheima.net/v1)变成了(https://api-hmzs.itheima.net/api) 如果适配开发阶段和上线之后的不同的接口基地址呢答案就是使用环境变量它可以做到在开发环境时接口走接口A在上线之后走接口B。
环境变量的定义和使用
定义位置和运行机制
对应环境文件说明开发环境.env.development当运行vue-cli-service serve的时候会以此文件为配置文件这个文件中可以定义针对开发环境的环境变量生产环境.env.production当运行vue-cli-service build的时候会以此文件为配置文件这个文件中可以定义针对生产环境的环境变量
定义环境变量
定义环境变量采用 key value 的语法进行定义其中key表示环境变量名称 value表示环境变量值
# just a flag
ENV development
# base api
VUE_APP_BASE_API https://api-hmzs.itheima.net/v1
使用环境变量
使用环境变量采用固定的前缀 process.env.环境变量名环境变量名要与定义时的保持一致
process.env.VUE_APP_BASE_API
配置开发和生产环境下的baseURL
# just a flag
ENV development
VUE_APP_BASE_URL https://api-hmzs.itheima.net/v1
# just a flag
ENV production
# base api
VUE_APP_BASE_URL https://api-hmzs.itheima.net/api
客户端环境变量的注意事项 客户端代码其实就是我们的src目录如果在这个目录下使用环境变量只能识别 NODE_ENV BASE_URL 和以 VUE_APP_ 打头的环境变量其它变量不可识别非客户端代码没有此要求。其中NODE_ENV 可以自定义覆盖 BASE_URL 覆盖不了 为避免记忆负担在业务中自定义环境变量的时候推荐采用严格的 VUE_APP变量前缀打头 微前端项目部署了解
服务器环境准备
我们在本地使用Node准备好了两台服务器 serverforadmin为服务器A是后台管理项目部署的位置服务地址为 http://localhost:8086 serverforbigscreen为服务B是前台可视化项目部署位置, 服务地址为http://localhost:8089 每一个服务中都有一个public文件夹它是静态服务文件夹是放置我们打包之后的代码的 对俩个项目分别进行打包然后把生成的dist目录下的文件放到对应的服务器的public文件夹中
根据环境切换加载子应用的地址
子应用大屏项目在开发时的服务地址为 http://localhost:5173/big-screen在上线之后变成了http://localhost:5173/big-screen为了适配上线之后的解析路径我们根据当年所处的环境适配一下加载子应用的地址 process.env.NODE_ENV 可以拿到当前运行的环境是生产还是开发 development为开发环境。
import { registerMicroApps, start } from qiankun
const isDev process.env.NODE_ENV development
registerMicroApps([{name: hmzs-big-screen,entry: ${isDev ? //localhost:5173 : //localhost:8089},container: #container,activeRule: /big-screen}
])
start()
更改子应用的base配置
vite.config.js中的配置项里有一个base配置它决定了项目启动时的静态资源比如jscss从哪个服务器下去获取因为上线之后子应用大屏项目的服务器地址变成了 http://localhost:8089 所以把base配置为 http://localhost:8089。
import { fileURLToPath, URL } from node:url
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import qiankun from vite-plugin-qiankun
export default defineConfig({base: http://localhost:8089/,plugins: [vue(), qiankun(hmzs-big-screen, {useDevMode: true})],server: {// 解决开发环境下的静态资源访问问题origin: //127.0.0.1:5173},resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url)),}}
})
更改子应用的路由
import { createRouter, createWebHistory } from vue-router
import HomeView from ../views/HomeView.vue
const router createRouter({history: createWebHistory()
})
export default router
打包独立部署到服务器
在俩个项目中分别执行打包命令生成打包文件之后把打包文件手动拷贝到对应的服务器的public文件夹里 执行 node app.js 启动对应的服务器。
Ngnix配置
