一、前言博主试了无数个教程但是无论是什么ai帮写的deploy.yml文件也好还是一步一步创建gh-pages分支然后巴拉巴拉也好都遇到了各种各样的问题。但是现在博主带着崭新的手法回来了无需这么麻烦按照up的方法从头到尾不用添加别的东西可以一键部署。同时博主也把自己当中遇到的问题跟大家分享一下解决方法。二、操作package.jsonscripts:{dev:vite,build:tsc -b vite build --base/lindpage/,# 这里lint:eslint .,preview:vite preview,check:tsc -b --noEmit,deploy:gh-pages -d dist# 这里},在scripts中增加所标注的两行其中build中的–base/仓库名/ 这里的lindpage是我的仓库名deploy: gh-pages -d dist直接复制过去就行注其他不要改动就算其他内容跟我所展示的不一样也不要改动使用gh-pages工具包【直接可以在vscode的终端中敲的】npmaddgh-pages-Dnpmrun buildnpmrun deploy然后过一会就好了也可以查看github仓库中的ACTIONS里面黄点变绿点了就ok了或者在vscode下一个github actions在其WORKFLOWS中也可以看三、疑难杂症遇到最大的问题就是为什么网页标题和当中的小图标是有显示的但是整个页面是空白的。找Router标签src/router/index.ts、src/main.tsx、src/App.tsx这三个文件着重看一下一般来说是在App.tsx文件中的但因为不同的编码习惯或者不同工具创建的项目也有可能在其他两个文件夹下下述代码是博主更改的Routerimport{BrowserRouterasRouter,Routes,Route}fromreact-router-dom;importHomefrom/pages/Home;exportdefaultfunctionApp(){return(//其中 basename/lindpage/ lindpage是我的仓库名你们改成自己的就行Router basename/lindpage/{/* Router */}RoutesRoute path/element{Home/}//Routes/Router);}大家会发现欸上面这样改了之后本地都不能访问了这就对了因为相当于把本地的路径也改了这样大家的本地资源就访问不到这个路径下了。大家也不用去搜什么写法来更改这里使得其本地和远程都可以访问就当一个是调试使用一个是发布使用就好了关于分支的问题gh-pages这个包实则就是在github远程仓库中创建了gh-pages分支【本地仓库是没有的】所以每次你的项目更新之后只需要npm run build然后npm run deploy就行了自动就给提交到gh-pages这个分支中去了。所以大家也不用在想本地main这个分支要不要提交会不会影响其实一点关系都没有。因为上面deploy: gh-pages -d dist这里就是把npm run build生成的dist发布到gh-pages中去。另看到有些up说要把dist文件夹名手动改成build使用实则是因为他们的deploy中那个用的也是build不是dist以上就是我的小小心得啦这个是我的个人主https://lindlight.github.io/lindpage/也欢迎大家赏脸
一、前言博主试了无数个教程但是无论是什么ai帮写的deploy.yml文件也好还是一步一步创建gh-pages分支然后巴拉巴拉也好都遇到了各种各样的问题。但是现在博主带着崭新的手法回来了无需这么麻烦按照up的方法从头到尾不用添加别的东西可以一键部署。同时博主也把自己当中遇到的问题跟大家分享一下解决方法。二、操作package.jsonscripts:{dev:vite,build:tsc -b vite build --base/lindpage/,# 这里lint:eslint .,preview:vite preview,check:tsc -b --noEmit,deploy:gh-pages -d dist# 这里},在scripts中增加所标注的两行其中build中的–base/仓库名/ 这里的lindpage是我的仓库名deploy: gh-pages -d dist直接复制过去就行注其他不要改动就算其他内容跟我所展示的不一样也不要改动使用gh-pages工具包【直接可以在vscode的终端中敲的】npmaddgh-pages-Dnpmrun buildnpmrun deploy然后过一会就好了也可以查看github仓库中的ACTIONS里面黄点变绿点了就ok了或者在vscode下一个github actions在其WORKFLOWS中也可以看三、疑难杂症遇到最大的问题就是为什么网页标题和当中的小图标是有显示的但是整个页面是空白的。找Router标签src/router/index.ts、src/main.tsx、src/App.tsx这三个文件着重看一下一般来说是在App.tsx文件中的但因为不同的编码习惯或者不同工具创建的项目也有可能在其他两个文件夹下下述代码是博主更改的Routerimport{BrowserRouterasRouter,Routes,Route}fromreact-router-dom;importHomefrom/pages/Home;exportdefaultfunctionApp(){return(//其中 basename/lindpage/ lindpage是我的仓库名你们改成自己的就行Router basename/lindpage/{/* Router */}RoutesRoute path/element{Home/}//Routes/Router);}大家会发现欸上面这样改了之后本地都不能访问了这就对了因为相当于把本地的路径也改了这样大家的本地资源就访问不到这个路径下了。大家也不用去搜什么写法来更改这里使得其本地和远程都可以访问就当一个是调试使用一个是发布使用就好了关于分支的问题gh-pages这个包实则就是在github远程仓库中创建了gh-pages分支【本地仓库是没有的】所以每次你的项目更新之后只需要npm run build然后npm run deploy就行了自动就给提交到gh-pages这个分支中去了。所以大家也不用在想本地main这个分支要不要提交会不会影响其实一点关系都没有。因为上面deploy: gh-pages -d dist这里就是把npm run build生成的dist发布到gh-pages中去。另看到有些up说要把dist文件夹名手动改成build使用实则是因为他们的deploy中那个用的也是build不是dist以上就是我的小小心得啦这个是我的个人主https://lindlight.github.io/lindpage/也欢迎大家赏脸
