bailicangdu

bailicangdu

水光潋滟晴方好,山色空蒙雨亦奇。

Member Since 5 years ago

jd.com, Shanghai, China

Experience Points
1.24w
follower
Lessons Completed
19
follow
Lessons Completed
151
stars
Best Reply Awards
22
repos

426 contributions in the last year

Pinned
⚡ A minimalist solution for building micro front-end applications. 一种用于构建微前端应用的极简方案
⚡ 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
⚡ 基于 node.js + Mongodb 构建的后台系统
⚡ 基于 vue + element-ui 的后台管理系统
⚡ vue2 + vue-router + vuex 入门项目
⚡ 一个 react + redux 的完整项目 和 个人总结
Activity
Oct
23
21 hours ago
Activity icon
issue

bailicangdu issue comment bailicangdu/vue2-elm

bailicangdu
bailicangdu

账号密度是多少呢?怎么登录不上

账号密度是多少呢?怎么登录不上

bailicangdu
bailicangdu

未注册过的账号,登录时将自动注册和登录,如果登录失败一般是账号被注册过了

Oct
22
1 day ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

路由跳转 携带二级路径

问题描述

  1. 反馈1 假如当前路由 ’/mic-react/list‘ 使用下面这种路由跳转方式后:
history.pushState(null, null, "/mic-vue2/about");
window.dispatchEvent(new PopStateEvent("popstate", { state: null }));

此时页面的路由 path 为 ’/mic-react/mic-vue2/about‘

  1. 反馈2 都在 history 路由, 当子应用跳转到一个空路由,此时用基座路由跳转回来,路由的path 已变,但页面没反应,用子应用的路由跳转就ok。 是要子应用做路由为空的校验吗

环境信息

  • micro-app版本:0.4.0
  • 主应用前端框架&版本:vue2
  • 子应用前端框架&版本:vue2
  • 构建工具&版本:webpack
bailicangdu
bailicangdu

第一个问题在vue-router4中会出现,此时不建议使用pushState,第二个问题没看懂,是rewrite了吗

Activity icon
issue

bailicangdu issue micro-zoe/micro-app

bailicangdu
bailicangdu

子应用 vue 切换页面后样式丢失

问题描述

升级了0.4.0,使用 内存优化后 , vue的项目切换其他页面,再切换回来样式丢失了,不做内存优化是没啥问题的。

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

子应用 vue 切换页面后样式丢失

问题描述

升级了0.4.0,使用 内存优化后 , vue的项目切换其他页面,再切换回来样式丢失了,不做内存优化是没啥问题的。

bailicangdu
bailicangdu
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

子应用 vue 切换页面后样式丢失

问题描述

升级了0.4.0,使用 内存优化后 , vue的项目切换其他页面,再切换回来样式丢失了,不做内存优化是没啥问题的。

Activity icon
published release v0.4.1

bailicangdu in micro-zoe/micro-app create published release v0.4.1

createdAt 1 day ago
Activity icon
created tag
createdAt 1 day ago
push

bailicangdu push micro-zoe/micro-app

bailicangdu
bailicangdu

fix: 修复了mounted生命周期在异步脚本中执行时机错误的问题

bailicangdu
bailicangdu

fix: 修复了对iframe src属性的错误处理

bailicangdu
bailicangdu

feat: 优化了module script的执行方式

bailicangdu
bailicangdu

fix: 修复了在非沙箱环境下使用umd模式,开启destory后,卸载时注册的函数没有卸载的问题

bailicangdu
bailicangdu

feat: 优化了报错日志信息,增加应用名称

bailicangdu
bailicangdu
bailicangdu
bailicangdu

fix: 修复了umd模式下,应用二次渲染时样式丢失的问题

bailicangdu
bailicangdu

fix: 修复了子应用带有preload时资源加载两次的问题

bailicangdu
bailicangdu

feat: 完善0.4.1单元测试

commit sha: 7f3a64f46f966796f49f0173f8b4aa2681abd193

push time in 1 day ago
push

bailicangdu push micro-zoe/micro-app

bailicangdu
bailicangdu

fix: 修复了子应用带有preload时资源加载两次的问题

bailicangdu
bailicangdu

feat: 完善0.4.1单元测试

commit sha: 2484898c421725fe878920d297e78920e00e86f9

push time in 1 day ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

希望可以给一个参数控制 fetch 是否携带 cookie

背景

当前部分页面需要携带 cookie 才能正常运行,希望可以用一个参数控制特定的 micro-app 携带 cookie

bailicangdu
bailicangdu

带cookie的场景不多,我们提供了一种解决方式:https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/advanced?id=_1%e3%80%81%e8%87%aa%e5%ae%9a%e4%b9%89fetch

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

子应用资源加载跨域,按照文档配置了子应用nginx允许跨域没起作用

子应用中的vite.config export default defineConfig({ plugins: [ // legacy({ // targets: ['Chrome >= 59'] // }), vue(), (function() { let basePath = '' return { name: "childAppA", apply: 'build', configResolved(config) { basePath = ${config.base}${config.build.assetsDir}/}, renderChunk(code, chunk) { if (chunk.fileName.endsWith('.js') && /(from|import)(\s*['"])(\.\.?\/)/g.test(code)) { code = code.replace(/(from|import)(\s*['"])(\.\.?\/)/g, (all, $1, $2, $3) => { return all.replace($3, new URL($3, basePath)) }) } return code } } })(), ], server: { port: 3000, host: '0.0.0.0' }, build: { outDir: 'dist', }, clearScreen: false, base:${process.env.NODE_ENV === 'production' ? 'http://10.0.93.103:3000' : ''}/childAppA/, })

基座应用中的main.ts ` /**

  • 自定义fetch
  • @param url 静态资源地址
  • @param options fetch请求配置项
  • @returns Promise */ fetch(url: string, options: any, appName: string) { let config = null if (url === 'http://10.0.93.103:3000/childAppA/') { config = { headers: { 'custom-head': 'custom-head', } } } return fetch(url, Object.assign(options, config)).then((res) => { return res.text() }) }`

子应用nginx配置 ` server { listen 3000; server_name 10.0.93.103;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

        if ($request_method = 'OPTIONS') {
            return 204;
        }

        root   html/dist;
        index  index.html index.htm;
    }`

基座应用和子应用都是用的vite,本地其服务在基座应用中可以打开子应用,放到本地的nginx上就不行了,也尝试更改这些相关配置,但是依旧都是提示跨域。并且单独打开子应用地址的时候,加载资源文件404,就是因为加载路径中多了childAppA这一层。

bailicangdu
bailicangdu

肯定是配置的问题,贴上我们使用的nginx配置以供参考:

server {
        listen       80;
        server_name  _;
        # root         /usr/share/nginx/html;
        root          /app/app;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
           add_header Access-Control-Allow-Origin *;
           add_header Cache-Control no-cache;
            alias /app/app/micro-app/docs/;
            index index.php index.html index.htm;
        }

        location /micro-app {
            alias /app/app/micro-app/docs/;
            index index.php index.html index.htm;
        }

        location /micro-app/demo {
            add_header Access-Control-Allow-Origin *;
            if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
                add_header Cache-Control max-age=7776000;
                add_header Access-Control-Allow-Origin *;
            }
            try_files $uri $uri/ /micro-app/demo/index.html;
        }

        location /micro-app/react16 {
            add_header Access-Control-Allow-Origin *;
            if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
                add_header Cache-Control max-age=7776000;
                add_header Access-Control-Allow-Origin *;
            }
            try_files $uri $uri/ /micro-app/react16/index.html;
        }

        location /micro-app/react17 {
            add_header Access-Control-Allow-Origin *;
            if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
                add_header Cache-Control max-age=7776000;
                add_header Access-Control-Allow-Origin *;
            }
            try_files $uri $uri/ /micro-app/react17/index.html;
        }

        location /micro-app/vue2 {
            add_header Access-Control-Allow-Origin *;
            if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
                add_header Cache-Control max-age=7776000;
                add_header Access-Control-Allow-Origin *;
            }
            try_files $uri $uri/ /micro-app/vue2/index.html;
        }

        location /micro-app/vue3 {
            add_header Access-Control-Allow-Origin *;
            if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
                add_header Cache-Control max-age=7776000;
                add_header Access-Control-Allow-Origin *;
            }
            try_files $uri $uri/ /micro-app/vue3/index.html;
        }

        location /micro-app/vite {
            add_header Access-Control-Allow-Origin *;
            if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
                add_header Cache-Control max-age=7776000;
                add_header Access-Control-Allow-Origin *;
            }
            try_files $uri $uri/ /micro-app/vite/index.html;
        }

        location /micro-app/angular11 {
            add_header Access-Control-Allow-Origin *;
            if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
                add_header Cache-Control max-age=7776000;
                add_header Access-Control-Allow-Origin *;
            }
            try_files $uri $uri/ /micro-app/angular11/index.html;
        }

        location ~* \.(eot|otf|ttf|woff|woff2|svg)$ {
           add_header Access-Control-Allow-Origin *;
           add_header Cache-Control max-age=7776000;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

chore: Semantic code and Fix spelling errors

PR Type:

  • refactor
  • style

PR Content:

  • Semantic code
  • Fix spelling errors
  • Code Formatter
bailicangdu
bailicangdu
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu
bailicangdu
bailicangdu

嗯,案例还在本地调试,写完会去掉

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

子应用资源加载跨域,按照文档配置了子应用nginx允许跨域没起作用

子应用中的vite.config export default defineConfig({ plugins: [ // legacy({ // targets: ['Chrome >= 59'] // }), vue(), (function() { let basePath = '' return { name: "childAppA", apply: 'build', configResolved(config) { basePath = ${config.base}${config.build.assetsDir}/}, renderChunk(code, chunk) { if (chunk.fileName.endsWith('.js') && /(from|import)(\s*['"])(\.\.?\/)/g.test(code)) { code = code.replace(/(from|import)(\s*['"])(\.\.?\/)/g, (all, $1, $2, $3) => { return all.replace($3, new URL($3, basePath)) }) } return code } } })(), ], server: { port: 3000, host: '0.0.0.0' }, build: { outDir: 'dist', }, clearScreen: false, base:${process.env.NODE_ENV === 'production' ? 'http://10.0.93.103:3000' : ''}/childAppA/, })

基座应用中的main.ts ` /**

  • 自定义fetch
  • @param url 静态资源地址
  • @param options fetch请求配置项
  • @returns Promise */ fetch(url: string, options: any, appName: string) { let config = null if (url === 'http://10.0.93.103:3000/childAppA/') { config = { headers: { 'custom-head': 'custom-head', } } } return fetch(url, Object.assign(options, config)).then((res) => { return res.text() }) }`

子应用nginx配置 ` server { listen 3000; server_name 10.0.93.103;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

        if ($request_method = 'OPTIONS') {
            return 204;
        }

        root   html/dist;
        index  index.html index.htm;
    }`

基座应用和子应用都是用的vite,本地其服务在基座应用中可以打开子应用,放到本地的nginx上就不行了,也尝试更改这些相关配置,但是依旧都是提示跨域。并且单独打开子应用地址的时候,加载资源文件404,就是因为加载路径中多了childAppA这一层。

bailicangdu
bailicangdu

将 location 修改为 location /childAppA {}, 然后通过http://10.0.93.103:3000/childAppA/ 访问子应用

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

建议使用文档官网能完善下

背景

发现文档目前有三个地址

https://micro-zoe.github.io/micro-app

https://zeroing.jd.com/micro-app

https://cangdu.org/micro-app/

三个文档地址中,第一个文档相对来说较新 例如:高级功能中,内存优化的文档,其余两个地址的文档中没有提现

还有问题就是,三个文档地址,有时打开很快,有时打不开,也有可能跟网络有关

期望的效果

能有个真正的官网地址,而且文档更新及时,细节全面

bailicangdu
bailicangdu

这里文档错误了,第二个export default 应该去掉,react的独立文档最近会补充,案例可以先参考这个:基座应用 https://github.com/micro-zoe/micro-app-demo/tree/master/main_apps/react16 子应用:https://github.com/micro-zoe/micro-app-demo/tree/master/child_apps/child-react16

Oct
21
2 days ago
Activity icon
issue

bailicangdu issue micro-zoe/micro-app

bailicangdu
bailicangdu

子应用使用element-plus 导致部分样式失效

比如一些使用到了 var 进行 css 变量提取的值, 没有成功转换 , 这样导致大量的样式需要整改.

.el-dialog__footer { padding: var(--el-dialog-padding-primary); }

--->

micro-app[name=setup] .el-dialog__footer { padding-right: ; padding-bottom: ; padding-left: ; }

push

bailicangdu push micro-zoe/micro-app

bailicangdu
bailicangdu

Merge pull request #122 from olivewind/fix/typo

fix: typo

commit sha: a833cb05f61db8612b9e05e969d96982e4c9859a

push time in 2 days ago
pull request

bailicangdu pull request micro-zoe/micro-app

bailicangdu
bailicangdu

fix: typo

框架 API 设计很不错👍看了一下源码,错别字挺多的,顺手修改几个,其它地方还有蛮多,有些涉及到框架逻辑我就不好处理了。

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

fix: typo

框架 API 设计很不错👍看了一下源码,错别字挺多的,顺手修改几个,其它地方还有蛮多,有些涉及到框架逻辑我就不好处理了。

push

bailicangdu push micro-zoe/micro-app

bailicangdu
bailicangdu

fix: 修复了umd模式下,应用二次渲染时样式丢失的问题

commit sha: 96e0d24b0faa916a9b3ba2265598f88a8147351c

push time in 2 days ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

子应用使用element-plus 导致部分样式失效

比如一些使用到了 var 进行 css 变量提取的值, 没有成功转换 , 这样导致大量的样式需要整改.

.el-dialog__footer { padding: var(--el-dialog-padding-primary); }

--->

micro-app[name=setup] .el-dialog__footer { padding-right: ; padding-bottom: ; padding-left: ; }

bailicangdu
bailicangdu

因为浏览器会将style样式转换为CSSRules,样式隔离就是利用转换后的CSSRules实现的,但是浏览器在转换部分var()样式为CSSRules时规则异常,这对浏览器没有影响,但是会导致样式隔离失败。 相似情况还有:

border: 1px solid var(--color-a);
border-top-color: var(--color-b);
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

子应用使用element-plus 导致部分样式失效

比如一些使用到了 var 进行 css 变量提取的值, 没有成功转换 , 这样导致大量的样式需要整改.

.el-dialog__footer { padding: var(--el-dialog-padding-primary); }

--->

micro-app[name=setup] .el-dialog__footer { padding-right: ; padding-bottom: ; padding-left: ; }

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

加载vue3子应用报错

问题描述

vue3+webpack 加载打包后的子应用报错 [micro-app from runScript] TypeError: Cannot read Property 'call' of undefined. 加载开发环境

复现步骤

1.用[email protected]创建一个vue3+webpack项目 2.打包完部署到nginx中通过基座访问

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。

复现仓库

请提供一个精简的代码仓库,然后上传到自己的 github,以帮助我们复现您的问题。

环境信息

  • micro-app版本:0.4.0
  • 主应用前端框架&版本:vue2.6
  • 子应用前端框架&版本:vue3.0
  • 构建工具&版本:[email protected]
bailicangdu
bailicangdu

可以具体说一下现象吗

Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

加载vue3子应用报错

问题描述

vue3+webpack 加载打包后的子应用报错 [micro-app from runScript] TypeError: Cannot read Property 'call' of undefined. 加载开发环境

复现步骤

1.用[email protected]创建一个vue3+webpack项目 2.打包完部署到nginx中通过基座访问

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。

复现仓库

请提供一个精简的代码仓库,然后上传到自己的 github,以帮助我们复现您的问题。

环境信息

  • micro-app版本:0.4.0
  • 主应用前端框架&版本:vue2.6
  • 子应用前端框架&版本:vue3.0
  • 构建工具&版本:[email protected]
Oct
20
3 days ago
Activity icon
issue

bailicangdu issue comment micro-zoe/micro-app

bailicangdu
bailicangdu

子应用 vue 切换页面后样式丢失

问题描述

升级了0.4.0,使用 内存优化后 , vue的项目切换其他页面,再切换回来样式丢失了,不做内存优化是没啥问题的。

bailicangdu
bailicangdu

已复现,本周五会发布新版本进行修复,谢谢提醒

Activity icon
issue

bailicangdu issue micro-zoe/micro-app

bailicangdu
bailicangdu

子应用 vue 切换页面后样式丢失

问题描述

升级了0.4.0,使用 内存优化后 , vue的项目切换其他页面,再切换回来样式丢失了,不做内存优化是没啥问题的。

Previous