vite+vue3部署静态文件到github

1. 新建仓库

1. 新建仓库
   
2. 仓库名称: 必须是 [你的git用户名]或[仓库名称] + .github.io，例如你的用户名是YunZhonJun，统一为小写，如↓

例1 用户名+.github.io

yunzhonjun.github.io 

例2 仓库名称+.github.io

colorspick.github.io 

• 效果图
• 

3. 按下左下角 创建按钮
   

• 创建完成后打开刚创建的仓库设置 - settings
  

• 打开pages可看见我们的静态网页地址
  

2. 配置vite

vite配置 - 参考地址已经写的很清楚 https://vitejs.cn/vite3-cn/guide/static-deploy.html#github-pages

文档个人参考配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base:'/colorspick.github.io/', 
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
}) 

3. 上传到github

1. 上传的文件夹打开 Git-bash
   
2. 上传到仓库

git init
git checkout -b main
git add -A
git commit -m '上传提示'
git push -f git@github.com:YunZhonJun/colorspick.github.io.git main

• git@github.com:YunZhonJun/colorspick.github.io.git是仓库地址
• main 是上传的发布源 ，如 ：官网(参考地址 - https://docs.github.com/zh/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site)
  
  

静态站点演示 - https://yunzhonjun.github.io/colorspick.github.io/

注意：以下内容与上面部署静态站点无关

git报错小结

git push时 报错 errno 10054

• 输入以下命令再push

git config --global http.sslVerify "false" 

• push

git add .
git push -u origin 名称