Coder Social home page Coder Social logo

hql7 / wl-micro-frontends Goto Github PK

View Code? Open in Web Editor NEW
509.0 12.0 129.0 4.93 MB

Micro front end practical project tutorial. 微前端项目实战vue项目。基于vue3.0&qiankun2.0进阶版:https://github.com/wl-ui/wl-mfe

Home Page: http://mfe.wlui.com.cn/

License: Apache License 2.0

JavaScript 47.49% HTML 1.69% Vue 50.18% CSS 0.19% SCSS 0.45%
micro microservices micro-frontends qiankun wl-qiankun qiankun-vue vue react angular

wl-micro-frontends's People

Contributors

dependabot[bot] avatar hql7 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wl-micro-frontends's Issues

nginx部署域名问题

子应用的图片和ajax请求域名都变成了父应用的域名,js和css是正确的,请问大佬是什么原因导致的。

修改父vuex中的值,子项目中的值不变

修改父vuex中的值,子项目中的值不变,求帮助。子项目中能显示出来。但是在父项目中修改后无法改变。子项目也能修改父项目的值。但是父项目值改变,子项目值不变

如何添加统一登录

大神你好,从你的例子学到很多,现在多应用如何集成统一登录,再master主应用吗? 感觉主应用是否不能使用vue-router。App.vue未找到router-view。

`npm run start`运行项目报错

启动报错信息如下:

warning ../../../../package.json: No license field
$ node config/start.js
即将进入所有模块并启动服务:["master","subapp-blog","subapp-ui"] ing...
master 开始启动... 全部启动需要时间,请稍加等候,或刷新浏览器即可
subapp-blog 开始启动... 全部启动需要时间,请稍加等候,或刷新浏览器即可
subapp-ui 开始启动... 全部启动需要时间,请稍加等候,或刷新浏览器即可
Unhandled Rejection at: Promise Promise {
  <rejected> Error: Command failed: start http://localhost:6650/
  /bin/sh: start: command not found
  
      at ChildProcess.exithandler (child_process.js:303:12)
      at ChildProcess.emit (events.js:311:20)
      at maybeClose (internal/child_process.js:1021:16)
      at Socket.<anonymous> (internal/child_process.js:443:11)
      at Socket.emit (events.js:311:20)
      at Pipe.<anonymous> (net.js:668:12) {
    killed: false,
    code: 127,
    signal: null,
    cmd: 'start http://localhost:6650/',
    stdout: '',
    stderr: '/bin/sh: start: command not found\n'
  },
  child: ChildProcess {
    _events: [Object: null prototype] {
      close: [Function: exithandler],
      error: [Function: errorhandler]
    },
    _eventsCount: 2,
    _maxListeners: undefined,
    _closesNeeded: 3,
    _closesGot: 3,
    connected: false,
    signalCode: null,
    exitCode: 127,
    killed: false,
    spawnfile: '/bin/sh',
    _handle: null,
    spawnargs: [ '/bin/sh', '-c', 'start http://localhost:6650/' ],
    pid: 7365,
    stdin: Socket {
      connecting: false,
      _hadError: false,
      _parent: null,
      _host: null,
      _readableState: [ReadableState],
      readable: false,
      _events: [Object: null prototype],
      _eventsCount: 1,
      _maxListeners: undefined,
      _writableState: [WritableState],
      writable: false,
      allowHalfOpen: false,
      _sockname: null,
      _pendingData: null,
      _pendingEncoding: '',
      server: null,
      _server: null,
      [Symbol(asyncId)]: 24,
      [Symbol(kHandle)]: null,
      [Symbol(lastWriteQueueSize)]: 0,
      [Symbol(timeout)]: null,
      [Symbol(kBuffer)]: null,
      [Symbol(kBufferCb)]: null,
      [Symbol(kBufferGen)]: null,
      [Symbol(kCapture)]: false,
      [Symbol(kBytesRead)]: 0,
      [Symbol(kBytesWritten)]: 0
    },
    stdout: Socket {
      connecting: false,
      _hadError: false,
      _parent: null,
      _host: null,
      _readableState: [ReadableState],
      readable: false,
      _events: [Object: null prototype],
      _eventsCount: 3,
      _maxListeners: undefined,
      _writableState: [WritableState],
      writable: false,
      allowHalfOpen: false,
      _sockname: null,
      _pendingData: null,
      _pendingEncoding: '',
      server: null,
      _server: null,
      write: [Function: writeAfterFIN],
      [Symbol(asyncId)]: 25,
      [Symbol(kHandle)]: null,
      [Symbol(lastWriteQueueSize)]: 0,
      [Symbol(timeout)]: null,
      [Symbol(kBuffer)]: null,
      [Symbol(kBufferCb)]: null,
      [Symbol(kBufferGen)]: null,
      [Symbol(kCapture)]: false,
      [Symbol(kBytesRead)]: 0,
      [Symbol(kBytesWritten)]: 0
    },
    stderr: Socket {
      connecting: false,
      _hadError: false,
      _parent: null,
      _host: null,
      _readableState: [ReadableState],
      readable: false,
      _events: [Object: null prototype],
      _eventsCount: 3,
      _maxListeners: undefined,
      _writableState: [WritableState],
      writable: false,
      allowHalfOpen: false,
      _sockname: null,
      _pendingData: null,
      _pendingEncoding: '',
      server: null,
      _server: null,
      write: [Function: writeAfterFIN],
      [Symbol(asyncId)]: 26,
      [Symbol(kHandle)]: null,
      [Symbol(lastWriteQueueSize)]: 0,
      [Symbol(timeout)]: null,
      [Symbol(kBuffer)]: null,
      [Symbol(kBufferCb)]: null,
      [Symbol(kBufferGen)]: null,
      [Symbol(kCapture)]: false,
      [Symbol(kBytesRead)]: 34,
      [Symbol(kBytesWritten)]: 0
    },
    stdio: [ [Socket], [Socket], [Socket] ],
    [Symbol(kCapture)]: false
  }
} reason: Error: Command failed: start http://localhost:6650/
/bin/sh: start: command not found

    at ChildProcess.exithandler (child_process.js:303:12)
    at ChildProcess.emit (events.js:311:20)
    at maybeClose (internal/child_process.js:1021:16)
    at Socket.<anonymous> (internal/child_process.js:443:11)
    at Socket.emit (events.js:311:20)
    at Pipe.<anonymous> (net.js:668:12) {
  killed: false,
  code: 127,
  signal: null,
  cmd: 'start http://localhost:6650/',
  stdout: '',
  stderr: '/bin/sh: start: command not found\n'
}

子项目不是自己的怎么办

如题,最近公司要搞微前段,我们是类似一个总集,子不是我们开发,而是其他团队开发,这样的情况,鉴权、通信应该怎么办

在qiankun官方文档的registerMicroApps的apps参数中接收container参数,为何此处是render呢?

在qiankun官方文档的registerMicroApps的apps参数中接收container参数,为何此处是render呢?有点不理解为何改了参数名称依旧能够正常运行,求指教。

qiankun文档:

{
      name: 'app1',
      entry: '//localhost:8080',
      container: '#container',
      activeRule: '/react',
      props: {
        name: 'kuitos',
      }
{
                name: i.module,
                entry: isDev ? i.devEntry : i.depEntry,
                render,
                activeRule: genActiveRule(i.routerBase),
                props: { ...msg, ROUTES: i.children, routerBase: i.routerBase }
            }

master启动不了

building 394/396 modules 2 active G:\testVueCloud\wl-micro-frontends-master\subapp-blog\node_modules\_core-js@2.6.11@core-js\library\modules\_to-length.js\n' } } reason: { RangeError [ERR_CHILD_PR
OCESS_STDIO_MAXBUFFER]: stderr maxBuffer length exceeded
at Socket.onChildStderr (child_process.js:360:14)
at Socket.emit (events.js:182:13)
at addChunk (_stream_readable.js:283:12)
at readableAddChunk (_stream_readable.js:260:13)
at Socket.Readable.push (_stream_readable.js:219:10)
at Pipe.onStreamRead (internal/stream_base_commons.js:94:17)
cmd: 'npm run serve',
stdout:
'\n> [email protected] serve G:\testVueCloud\wl-micro-frontends-master\subapp-blog\n> vue-cli-service serve\n\n INFO Starting development server...\n',
stderr:

子应用router模块问题

子应用在main.js里面createRouter,
其他js模块,如何import这个router对象呢?
main.js里面不能再export Router,微前端模式下是需要在mount里面create,保证每次都是新的。

请教关于依赖问题

相同的依赖,但在主应用跟子应用的两个版本不同会有影响吗,例如element-ui 在主应用是2.4.5 但在子应用是2.0.0

父项目与子项目,只用一套部署,文件会报错404

父项目与子项目,只用一套部署,文件会报错404,但是父项目中可以正常访问,是不是不能够直接通过在子项目中man.js判断,分别走不同的处理方式来处理,既要在父项目中正常使用,又要在子项目中正常使用,请问一下,楼主有什么方案可以处理这种场景吗

demo跑起来没有问题,加入一个自己的子应用报错

具体信息如下

Uncaught TypeError: application 'call-center' died in status BOOTSTRAPPING: Cannot read property 'install' of undefined
at Function.Vue.use (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5090)
at _callee$ (webpack-internal:///./src/main.js:95)
at tryCatch (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:45)
at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:274)
at Generator.prototype. [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:97)
at asyncGeneratorStep (webpack-internal:///./node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5)
at _next (webpack-internal:///./node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:27)
at eval (webpack-internal:///./node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:34)
at new Promise ()
at new F (webpack-internal:///./node_modules/core-js/library/modules/_export.js:36)

在子应用中使用了几个自定义指令,不知道是不是自定义指令引起的

ps:是自己直接复制粘贴没仔细看代码。。

生产环境部署后,F5刷新页面,nginx 404

现项目打包后使用nginx部署,可以访问,但是刷新页面时,会出现404,原因应该是他直接从子应用开始加载,我观察了您提供的在线地址,是支持刷新的,麻烦提供一下思路

启动报错

下拉代码后、安装依赖、然后运行项目yarn serve 报错

父应用是否不能使用vue-router?

你好,我最近也在搞微前端
由于qiankun对子系统的跳转也是用到了跟vueRouter一样的h5的history
所以qiankun这边主应用的
<div id="root-view" class="app-view-box" v-html="content"></div>
不能写在<router-view />里的组件,否则也会刷新掉页面无法获得,因此只能写在App.vue里面,这样导致侧栏跟标签页等也只能写在App.vue,甚至也不能使用VueRouter。
请教下你是否有解决方案或者思路?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.