飘香的豆腐-CSDN博客

原创 qiankun 微前端应用实践与部署（四）

一般情况下，我们对应用进行配置打包，要对图片字体等资源进行下面配置，使得资源路径正常加载。但是，在微前端模式下，子应用打包部署后，往往会出现子应用 css 文件里面引入资源路径加载失败的问题，下面就让我们来探究一下。???? 独立应用下的 url-loader 配置：// vue-cli 2 写法module: { rules: [ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: "url-loader",

2020-09-14 20:55:42 836

原创 qiankun 微前端应用实践与部署（三）

微前端架构下，主应用有自己的路由模块，同时主应用支持以微前端的方式嵌入业务模块（子应用），如何实现呢？关于路由qiankun 在主应用初始化会自动监听路由的变化去匹配注册好的子应用路由活动规则，同时 vue 路由也会监听路由变化。因为主应用有自己的业务模块，需要支持页面刷新，所以采用 hash 路由模式。qiankun 官方 demo 使用的是 history 路由模式。那么，采用 hash 路由模式的话，主应用路由会有 /#/ 的前缀，比如主应用的 resource 组件路由：http://lo

2020-09-14 20:51:23 1423

原创 qiankun 微前端应用实践与部署（二）

下面是两种方案的简要描述。传统部署方式通过配置 nginx 端口到目录的转发。具体可查看上一篇文章特点需要对外开放子应用对应的端口，将编译好的应用文件放到对应的配置目录。docker 部署方式首先构建主应用与子应用的 docker 镜像，通过 docker run 或者 docker-compose 的方式启动容器。通过配置 nginx 转发规则，匹配访问路径子应用容器端口。假设服务器 ip 是 192.168.2.192，主应用容器端口是 8889，子应用容器端口是 7100、710

2020-09-14 20:48:15 428

原创 qiankun 微前端应用实践与部署

微前端应用分为主应用与子应用，部署方式是分别编译好主应用与子应用，将主应用与子应用部署到 nginx 配置好的目录即可。代码仓库 https://github.com/jwchan1996/qiankun-micro-app分别进入 portal、app1、app2 根目录，执行:开发模式# portalyarnyarn start# app1、app2npm installnpm run dev生产模式# portalyarn build# app1、app2np

2020-09-14 20:41:50 1251 2

原创 Flutter 读取应用资源并显示

在 flutter 中，如果需要加载资源的话，需要在 pubspec.yaml 指定 APP 所需要的资源。这样的话，指定的每个 Asset （资源）都会被打包在 APP 中，并且在 APP 运行时可以访问到这些资源。最常见的 Asset 类型就是图片，指定图片资源后即可以在 APP 页面使用图片控件加载资源了。# pubspec.yamlflutter: assets: - assets/images/logo.png// lib/main.dartImage.a

2020-09-14 20:30:33 415

原创 Electron 踩坑记录（三）

本文内容只适用于使用 electron-vue 模板生成的 electron 工程，相关配置也是围绕其进行。当然，使用 vuecli3 生成的 electron 工程也可参考。对于 electron-vue 工程，由于理论上默认写死的 9080 端口可能出现被占用的情况，所以应用 http 服务应该采用自我判断的方式来使得端口保证可用。electron 引用 flash 插件打包示例实现判断逻辑在 /lib/utils/ 下创建文件 portIsOccupied.js，实现判断端口占用情况，向进程环

2020-08-31 14:28:41 1112

原创 Electron 踩坑记录（二）

场景描述– 2020-04-28 更新：由于 flash 30 版本以后会出现提示“未能正确加载必要组件”（其实是广告程序），导致失效，flash 版本应该替换为 29 版本。–electron 引用 flash 插件打包示例上一篇 electron 踩坑(一) 说到 electron 加载 flash 的问题采用的是加载系统安装好的 flash 插件，需要用户提前安装好 flash 才能正常工作app.commandLine.appendSwitch('ppapi-flash-path', ap

2020-08-26 18:02:17 909 3

原创 Electron 踩坑记录（一）

场景描述构建 pc 客户端，采用 electron-vue 脚手架进行快速搭建环境。功能点在 web 端全部正常，移植代码到 electron 时出现问题的功能点有：1. rtmp 流媒体的播放 2. ant-design-vue UI 框架部分组件失效???? 播放器使用的是 vue-video-player，播放 rtmp 流需要使用 flash 技术。electron 引用 flash 插件打包示例问题解决简单记录问题关键问题：pc 客户端 ant-design-vue 部分组件

2020-08-26 18:01:33 595

原创 centos7 使用 docker 部署 gitlab + gitlab-runner

快速配置应用docker-compose.yml使用 docker-compose 对 docker 容器集群进行快速编排获取 docker-gitlab 的 docker-compose.yml 配置文件，进行快速构建$ wget https://raw.githubusercontent.com/sameersbn/docker-gitlab/master/docker-compose.yml获取 docker-compose.yml 文件后，进行自定义配置。配置环境打开 docker-

2020-08-26 18:00:17 953

原创 Vuepress 使用 CDN 优化 gh-pages 加载速度

众所周知，github 在国内访问极不稳定，有时候加载速度极慢，导致国内用户体验极差。我的 Vuepress 博客网站刚好是托管在 gh-pages 上，所以就想优化访问速度，让页面更加顺滑。优化方案下面优化博客加载速度的一些方案：优化打包代码文件大小压缩加载资源文件大小减少 http 请求次数采用 cdn 加速因为 Vuepress 是静态博客，而且 Vuepress 本身会优化打包代码文件大小，所以现在方向是压缩图片等资源文件大小，并且使用 cdn 加速。使用 CDN 加速免费的

2020-07-16 19:51:57 812 1

原创 docker 访问外部 https 的数字证书验证问题

我们在构建 docker 镜像时一般使用的是 alpine linux 系统，默认是不带 ca-certificates 根证书的，导致无法识别外部 https 携带的数字证书。那么，在访问的时候就会抛出 x509: certificate signed by unknown authority 的错误，导致 docker 容器的接口服务返回 500。为了解决证书验证的问题，我们要在构建 docker 镜像的时候把 ca-certificates 根证书给装上，这样就能识别来自外部 https 的数字证

2020-07-16 19:46:45 2126

我爱盐酥鸡