GithubHelp home page GithubHelp logo

cyberfei / puzzle Goto Github PK

View Code? Open in Web Editor NEW
236.0 7.0 51.0 1.17 MB

A pluggable micro-frontend structure based on Vue and Webpack5. 基于 Vue 和 Webpack5 的可热插拔式微前端架构

License: MIT License

JavaScript 13.90% Vue 70.36% CSS 15.13% Less 0.62%
vue micro-frontend pluggable hot-swap webpack5

puzzle's People

Contributors

cinyearchan avatar cyberfei avatar dependabot[bot] 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

puzzle's Issues

关于当前框架如何做到组件更新,自动影响到puzzle下所有独立的前端包而不需要每个前端包重新打包!

作者您好!当前框架如何做到组件更新,自动影响到puzzle下所有独立的前端包,即puzzle下可能有多个前端包用到某个公共组件,现在更新了组件,每个引用了该组件的前端包都需要重新打包,怎么样能够做到只打公共组件包更新即可,所有引用该组件的前端包不需要重新打包?

新增模块无法在服务器上加载

通过npm run build 命令打包 dashboard以及test,放到服务器后没什么问题,但另外打包database模块后,放到服务器上面, 新增的database模块没有加载出来

项目中缺少static包

Error: Cannot find module '../static/dll/core.manifest.json'

启动报错,请上传相关配置文件

微前端的模块化问题

1.做微前端大多是以发布文件作为加载模块
2.框架应该只做路由层,以及应该考虑一下多模块的切换以及生命周期卸载才能用到大项目上

关于更换路由为history 部署到环境未显示页面

你好,作者,我在发布项目的时候遇到了个问题,部署地址:http://air.goworkla.cn/vue/dist/ 我将项目路由方式更换为history,本地项目运行正常,部署到线上环境,页面未显示出来,并没有报错,我查看源文件 config.js ,core.f5dcb2c61d39e134ede4.dll.js,puzzle.a5a0ea60f8faab282355.dll.js 等文件都可以查看的到,控制台也未看到报错信息,

子模块是否可以独立部署

最近才接触微前端的概念,冒昧问一下作者大大,我有看到您项目介绍里说用您的框架开发的子项目打包后可以快速组合,是不是意味着用其它框架打包的项目无法组合,子项目也无法做到独立部署

请问如何支持 history 路由

已有的项目想结合这种热插拔,但是 vue-router 是用的 history 模式。我测试过这个 puzzle-demo 如果用 history 模式,会报错,请问能支持 history 路由吗?

关于配置项的问题

我原先是写了一个dev.env.js 和 prod.env.js 的系统环境变量文件, 用于区分开发环境和生产环境的变量,
然后在webpack的plugins中添加

    new webpack.DefinePlugin({
      'process.env': require('./dev.env')
    }),

项目中通过 process.env.XXX 来获取配置的变量.

现在我在 webpack.build.common.js 中增加了这个配置, 为什么读取不到这个变量?

我应该怎么改?

👍

框架设计的很棒棒,学习了! 它可以有效解决vue巨石应用的一些痛点,给你点个赞👍

生产环境部分导出模块的bug

目前只关注生产环境: 如果build 后 没有选择全部的 puzzle模块内的 子页面,然后 运行后,在单独 发布一个之前未添加的页面 puzzlesDetail 页没有成功加载的

实际业务中,共用的 api 接口应该放在哪里

比如在 puzzles 业务中,有 database 和 elastic 这两个业务,都调用了同一个 http 请求接口,这时候 api 接口应该写在什么位置,总不能在 database/scripts/api.js 中写一个,在 elastic 中再写一个一样的请求接口。

部署到nginx上面报错

部署到nginx上面报错
core.c605fb4ef547060797fb.dll.js:7 ReferenceError: core_f5dcb2c61d39e134ede4 is not defined
at Object. (dashboard.js?v=0.1.0:1)
at c (dashboard.js?v=0.1.0:1)
at Object. (Frame.87a958011a1b65b1bd6b.js:1)
at c (dashboard.js?v=0.1.0:1)
at Module. (Frame.87a958011a1b65b1bd6b.js:1)
at c (dashboard.js?v=0.1.0:1)

npm run dll

报错E:\Workspace\vue模板\puzzle-master\puzzle-master\node_modules\class-utils\node_modules\define-property\index.js:1
(function (exports, require, module, __filename, __dirname)
{SyntaxError: Invalid or unexpected token
at new Script (vm.js:74:7)
at NativeCompileCache._moduleCompile (E:\Workspace\vue模板\puzzle-master\puzzle-master\node_modules\v8-compile-cache\v8-compile-cache.js:240:18)
at Module._compile (E:\Workspace\vue模板\puzzle-master\puzzle-master\node_modules\v8-compile-cache\v8-compile-cache.js:186:36)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (E:\Workspace\vue模板\puzzle-master\puzzle-master\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
at Object. (E:\Workspace\vue模板\puzzle-master\puzzle-master\node_modules\class-utils\index.js:5:14)
at Module._compile (E:\Workspace\vue模板\puzzle-master\puzzle-master\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (E:\Workspace\vue模板\puzzle-master\puzzle-master\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
at Object. (E:\Workspace\vue模板\puzzle-master\puzzle-master\node_modules\base\index.js:10:10)
at Module._compile (E:\Workspace\vue模板\puzzle-master\puzzle-master\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (E:\Workspace\vue模板\puzzle-master\puzzle-master\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
at Object. (E:\Workspace\vue模板\puzzle-master\puzzle-master\node_modules\snapdragon\index.js:3:12)
at Module._compile (E:\Workspace\vue模板\puzzle-master\puzzle-master\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] core: webpack --hide-modules --config config/webpack.build.core.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] core script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2020-07-08T10_09_19_804Z-debug.log

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.