衡阳有线宽带网站,莆田网站建设哪里便宜,wordpress有点,国家建设部网站倪虹文章目录 第一步#xff1a;打包第二步#xff1a;github仓库设置第三步#xff1a;安装插件gh-pages第四步#xff1a;两个配置第五步#xff1a;上传github其他问题1. 路由2.待补充 参考文章#xff1a; 环境#xff1a; vue3vite windows11#xff08;使用终端即可打包第二步github仓库设置第三步安装插件gh-pages第四步两个配置第五步上传github其他问题1. 路由2.待补充 参考文章 环境 vue3vite windows11使用终端即可 “vue”: “^3.5.13”, “vue-router”: “^4.5.0”, “gh-pages”: “^6.3.0”, 第一步打包
先进入你vue项目的地方
cd xxxxxxxx然后把项目打包
npm run build打包完一般长这样多出一个dist文件夹目录 这里的index.html就是适配后面github page要求的主页没有这个静态页面无法正确启动 第二步github仓库设置
GitHub官网网址 首先你必须应该有一个你个人账号的github仓库 且安装好了git相关配置 且必须是public公开的仓库除非你准备花钱开私人的那个page服务 第三步安装插件gh-pages
回到你的vue项目 在你打包的同一个目录下安装一个专门用于打包vue的插件 npm install --save-dev gh-pages第四步两个配置
在vite.config.js文件里加上base你的仓库名称注意路径和引号都不要省略根据自己的实际情况有些可能是直接根目录./我这次打包不是
export default defineConfig({base: /github仓库名称/,xxxxxxx})在package.json文件里加上deploy这一行用于后续运行deploy打包直接输出到github
scripts: {dev: vite,build: vite build,preview: vite preview,deploy: gh-pages -d dist},第五步上传github
npm run deploy然后等一会会显示如下 published出来就证明没问题了 进入你的仓库找到Setting进入设置再点击Pages可以看到上面一般有一个网址 去访问就行了 注意默认是上传到gh-pages分支了的 所以如果page里设置save的是这个分支则是正确的 其他问题
1. 路由
在使用插件前我试过手动上传于是白屏了根据查资料发现可能一个原因是vue-routerindex.js文件里需要改成Hash
const router createRouter({history: createWebHashHistory(import.meta.env.BASE_URL), //原来是createWebHistoryroutes: [………],
})改完会发现网址多了个井号#这可能是一个问题解决办法。
2.待补充
参考文章
GitHub Pages 快速入门 - GitHub 文档 GitHub Pages部署vue项目后白屏问题
