2024年10月nextjs教程（next.js可以用qiankun吗）

　　⑴nextjs教程（next.js可以用qiankun吗

　　⑵next.js可以用qiankun吗

　　⑶qiankun:是一个生产可用的微前端框架，它基于single-spa，具备js沙箱、样式隔离、HTMLLoader、预加载等微前端系统所需的能力。qiankun可以用于任意js框架，微应用接入像嵌入一个iframe系统一样简单。应用场景:.主应用与多个相互独自的微应用一起构成了整个大的微前端应用.可以在同一个页面中，加载多个不同的微应用，每个微应用都是主应用的组成部分或者是提供一些增强能力，这种场景可以说是微应用粒度的前端组件化。即:qiankun相当于route-based的控制台应用，做为一个微应用的聚合框架而被使用。使用步骤:.主应用安装yarnaddqiankun#ornpmiqiankun-S.在主应用中注册微应用import{registerMicroApps,runAfterFirstMounted,start}from’qiankun’;//window.qiankunStarted为严谨,防止加载多次(可省略)if(!window.qiankunStarted){window.qiankunStarted=true;registerMicroApps([{name:’invoice’,//子应用名的标识entry:`${process.env.VUE_APP_INVOICE_URL}`,//子应用的目标地址,可在环境变量中配置container:’#subapp-viewport’,//把加载到的子路由界面放在某个容器中//loader,activeRule:’/invoice’,//加载以/invoice开头的路由},],//主应用的生命周期//{//beforeLoad:[//app=》{//console.log(’beforeload%c%s’,’color:green;’,app.name);//},//],//beforeMount:[//app=》{//console.log(’beforemount%c%s’,’color:green;’,app.name);//},//],//afterUnmount:[//app=》{//console.log(’afterunmount%c%s’,’color:green;’,app.name);//},//],//},);//初始化主应用属性//const{onGlobalStateChange,setGlobalState}=initGlobalState({////user:’qiankun’,//});//onGlobalStateChange((value,prev)=》console.log(’:’,value,prev));//设置自定义属性可传参到子应用中,在子应用的mounted钩子中使用prop属性来接受//setGlobalState({////ignore:’master’,////user:{////name:’master’,////},//});//setDefaultMountApp(’/’);start();//runAfterFirstMounted(()=》{//console.log(’firstappmounted’);//});}当微应用信息注册完之后，一旦浏览器的url发生变化，便会自动触发qiankun的匹配逻辑，所有activeRule规则匹配上的微应用就会被插入到指定的container中，同时依次调用微应用暴露出的生命周期钩子。.配置渲染微应用容器的路由.在微应用中导出相应的生命周期钩子..在微应用的src目录新增public-path.jsif(window.__POWERED_BY_QIANKUN__){//eslint-disable-next-lineno-undef__webpack_public_path__=window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}..修改微应用中的路由文件router.js，根据微应用标识限制路由范围..入口文件main.js修改，为了避免根id#app与其他的DOM冲突，需要限制查找范围。//在微应用中的main.js中配置letinstance=null;functionrender(props={}){//props对象中的container属性指的是主应用的domconst{container}=props;instance=newVue({router,store,render:(h)=》h(App),}).$mount(container?container.querySelector(’#app’):document.querySelector(’#app’));}//独立运行微应用时if(!window.__POWERED_BY_QIANKUN__){render();}/***bootstrap只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用mount钩子，不会再重复触发bootstrap。*通常我们可以在这里做一些全局变量的初始化，比如不会在unmount阶段被销毁的应用级别的缓存等。*/exportasyncfunctionbootstrap(){console.log(’vueappbootstraped’);}//应用每次进入都会调用mount方法，通常我们在这里触发应用的渲染方法exportasyncfunctionmount(props){console.log(’propsfrommainframework’,props);render(props);}//unmount时销毁应用,防止内存泄漏exportasyncfunctionunmount(){instance.$destroy();instance.$el.innerHTML=’’;instance=null;}.配置微应用的打包工具（vue.config.jsconst{name}=require(’);module.exports={devServer:{headers:{’Aess-Control-Allow-Origin’:’*’,},},configureWebpack:{output:{library:`invoice`,//应用标识,和name保持一致libraryTarget:’window’,//把微应用打包成window格式jsonpFunction:`webpackJsonp_${name}`,},},};使用qiankun微应用需要注意几点:.在微应用src中新增public-path.js文件，用于修改运行时的publicPath.微应用建议使用history模式的路由，需要设置路由base，值和它的activeRule是一样的。.在入口文件最顶部引入public-path.js，修改并导出三个生命周期函数。.修改webpack打包。主应用路由配置需要注意到的点:.微应用入口路由需配置在主应用的后面.否则主应用的界面显示不出来.如遇到路由显示的顺序问题,如上图,第一个路由菜单需显示在左侧导航栏的最后面,可以给每个路由设置order属性,用于在渲染导航栏菜单之前进行排序..如遇到样式冲突,则各自加载各自的vue和elementUI

　　⑷Next.js配置接口跨域代理转发

　　⑸上一个章节中，讲解了next下如何通过axios获取远程数据，可是遇到了跨域的问题，所以单独写个文章讲解一下，如何在开发模式dev下面，解决跨域，没有使用跨域代理之前下面开始讲解如何跨域首先，打开我们的koa项目，启动，用koa来作为后台接口模拟数据好，正式开始配置~~~~~~~~~~~~~~~~~~~~~~~~~~打开Next项目:安装跨域的依赖中间包http-proxy-middleware：根目录下面新建server.js//server.jsps：target一定要修改为而不是’否则就会，我这里就搞错了：修改package.json//package.json:使用//pageA.js可以看到前面的前缀就不需要啦，直接加地址就好了效果图OK，成功跨域

　　⑹Next.js中使用antd组件

　　⑺Next.js中不能直接使用css，需要我们自行解决：（需要安装zeit/next-css：npminstall--savezeit/next-css（安装成功，需要在根目录建立next.config.js()重启项目（先安装AntDesign库：npminstall--saveantd（再安装babel-plugin-import：npminstall--savebabel-plugin-import目的：只加载项目中用到的模块，这就需要我们用到一个babel-plugin-import文件，配置好了.babelrc就不会把AntDesign打包到生产环境。（重启项目（在需要的页面引入

　　⑻next.js如何修改favicon.ico

　　⑼目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。favicon图片放到该文件夹下。然后再index.html中添加：《linkrel=“shortcuticon“type=“image/x-icon“href=然后刷新浏览器，就会更新。如果没有效果，则查看你的build文件夹下：build/webpack.dev.conf.js中。（到这个步骤之前我的是出现了，并且正常显示，如果不显示，则配置一下吧。newHtmlWebpackPlugin({filename:’index.html’,template:’index.html’,inject:true,favicon:’),到这个时候，页面的favicon已经可以正常显示了。然而，如何从服务器动态获取图片呢，这样以来就可以像上传文件一样，随意更换favicon。先看一下stackoverflow上的回答(function(){varlink=document.querySelector(“link)+’&’}returnret.slice(,ret.length-);}}

　　⑽nextjs的路由和koa

　　⑾这边有一点是需要认识到的就是，koa和next之间的结合，正常来说我们在使用nextjs的时候，已经被提供了一个server足以让整个next项目运行期俩，那么为什么我们还要引入koa？因为我们需要解决一些问题：动态路由：比如：一但刷新，那么就意味着的错误会发生，但是这个是makesense的，因为page里面本来就没有a/这个文件所以这里我们就要koa来作为中间件来帮助我们解决这个问题’’’router.get(’/a/:id’,async(ctx)=》{constid=ctx.params.id;awaithandler(ctx.req,ctx.res,{pathname:’/a’,query:{id}})ctx.response=false})server.use(router.routes())’’’上面的这段koa就会帮助我们当访问了/a/id,koa的服务器就会辅助我们把router里面的事情在做一遍，这样就能帮助整个系统来找到这个动态的路径

　　⑿Next.js配置BASE_URL（基本域名

　　⒀安装、配置BASE_URL和NODE_ENV进入package.json，找到scripts配置、配置全局变量进入next.config.js,添加env配置、全局使用它

　　⒁next.jsimage如何根据屏幕大小,换成不同文件图片

　　⒂在Next.js中，您可以使用响应式图像技术，即使用不同大小的图像文件适应不同的屏幕分辨率。有两种常用的做法：.srcset和sizes属性：您可以使用srcset和sizes属性为每种分辨率指定不同的图像文件。《imgsrc=(max-width:px)px,(max-width:px)px,px“alt=“responsiveimage“/》.使用JavaScript和CSS：您可以使用JavaScript和CSS检测屏幕大小，然后动态地更改图像的src属性。importReact,{useState,useEffect}from’react’;constResponsiveImage=()=》{const=useState();const=useState(smallImage);useEffect(()=》{setWindowWidth(window.innerWidth);},);useEffect(()=》{if(windowWidth》=){setSrc(largeImage);}elseif(windowWidth》=){setSrc(mediumImage);}else{setSrc(smallImage);}},);return(《imgsrc=);}您可以根据您的需求选择一种方法，或者结合两种方法使用。

　　⒃nextjs如何获取原生request

　　⒄Next.js提供了一个API，可以让你访问原生的request对象：```import{getRequest}from’next/dist/next-server/server/request’;exportdefaultfunctionMyPage(){constrequest=getRequest();console.log(request);//...}```你可以使用这个API来访问原生的request对象，以获取请求的信息，比如请求头、请求参数等。

　　⒅使用next.js渲染飞冰生成的UI

　　⒆在本文中，您将学到babel，webpack，next.js,飞冰的一些基础使用。

　　⒇以及最重要的一点，不屈不挠的爬坑精神。

　　⒈next.js是什么

　　⒉第一步使用飞冰的模版创建一个项目

　　⒊这里选择自定义模版，只需要它生成项目框架。

　　⒋注意：这里先不要添加依赖,飞冰自己安装的webpack版本会导致next.js无法使用自身的配置启动项目。

　　⒌当然，你也可以像我一样尝试，找一个酷炫的模版

　　⒍npminstall--savenextreactreact-dom

　　⒎安装完后，可以安装所有依赖了

　　⒏npminstall

　　⒐安装完后，配置package.json文件,这里指定pages文件夹位于src下

　　⒑到这里是不是已经迫不及待想要

　　⒒一切看起来风和日丽，格外美丽，我们尝试显示NotFound页面

　　⒓nextjs的两种部署方式

　　⒔执行build命令以后,生成的内容默认在.next文件夹里,然后你执行nextstart就能启动一个nodejs服务也可以用docker部署下面是官方提供的dockerfile例子执行下面这条命令或者你也可以直接加入到package.json里,然后执行npmrunbuild默认生成的静态页面在out文件夹里.