github pages自动部署测试

Author: durunsong

.env.github

@@ -0,0 +1,14 @@
+# 生产环境自定义的环境变量（命名必须以 VITE_ 开头）
+
+## 路由模式 hash 或 html5
+VITE_ROUTER_HISTORY = 'hash'
+
+## 打包路径（就是网站前缀，例如部署到 https://durunsong.github.io/kilyicms/ 域名下，就需要填写 /kilyicms/）
+VITE_PUBLIC_PATH = '/kilyicms/'
+
+# 生产环境
+VITE_MODE = 'production'
+
+## 后端接口公共路径（如果解决跨域问题采用 CORS 就需要写全路径）
+## 变量必须以 VITE_ 为前缀才能暴露给外部读取
+VITE_BASE_API = 'https://kilyicms-server.vercel.app'

.github/workflows/static.yml

@@ -1,61 +1,42 @@
-# GitHub Actions 工作流程文件
-name: 自动部署为 GitPage 静态网站
+name: 自动部署为 GitHub Pages
 
-# 当代码推送到指定的分支（例如 main 分支）时，触发此工作流程
 on:
   push:
     branches:
-      - main # 当推送到 main 分支时触发
+      - main
 
-# 设置 GITHUB _ TOKEN 的权限以允许部署到 GitHub 页面
 permissions:
-  contents: read # 仅允许工作流写入 `main` 分支内容。最小化权限以确保安全
+  contents: write
   pages: write
   id-token: write
 
 jobs:
   deploy:
-    name: 自动部署为 GitPage 静态网站
-    # 定义工作运行的环境，这里使用的是最新的 Ubuntu 操作系统
     runs-on: ubuntu-latest
-
-    # 设置全局环境变量，强制所有 JavaScript Actions 使用 Node.js 20
     env:
       FORCE_JAVASCRIPT_ACTIONS_TO_NODE20: true
 
     steps:
-      # Step 1: 检出仓库代码
-      # 使用 actions/checkout@v4 检出代码库的内容到工作环境中
       - name: 1、读取仓库内容
         uses: actions/checkout@v4
 
-      # Step 2: 设置 Node.js 环境
-      # 使用 actions/setup-node@v4 安装并配置指定版本的 Node.js 环境
       - name: 2、设置 Node.js 环境
         uses: actions/setup-node@v4
         with:
-          node-version: 20 # 使用的 Node.js 版本
+          node-version: 20
 
-      # Step 3: 安装 pnpm
-      # 安装 pnpm，这是一个快速、节省磁盘空间的包管理工具
       - name: 3、安装 pnpm
         run: npm install -g pnpm
 
-      # Step 4: 安装依赖
-      # 使用 pnpm 安装项目所需的依赖项
-      - name: 4、安装项目所需的依赖项
+      - name: 4、安装依赖
         run: pnpm install --frozen-lockfile
 
-      # Step 5: 构建项目
-      # 使用 pnpm 运行构建脚本，生成生产环境的构建文件
-      - name: 5、构建项目
-        run: pnpm run build
+      - name: 5、构建项目（使用 .env.github）
+        run: pnpm run build:github
 
-      # Step 6: 部署到 GitHub Pages
-      # 使用 peaceiris/actions-gh-pages@v4 部署构建文件到 GitHub Pages
       - name: 6、部署到 GitHub Pages
         uses: peaceiris/actions-gh-pages@v4
         with:
-          github_token: ${{ secrets.TOKEN }} # 使用 GitHub 提供的密钥进行身份验证
-          publish_dir: dist # 指定构建输出目录，默认为 Vite 项目的 dist 目录
-          force_orphan: true # 是否使用孤立分支，避免与历史记录冲突
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: dist
+          force_orphan: true

package.json

@@ -15,6 +15,7 @@
   "scripts": {
     "dev": "vite",
     "build:prod": "vue-tsc --noEmit && vite build",
+    "build:github": "vite build --mode github",
     "preview:prod": "pnpm build:prod && vite preview",
     "lint:eslint": "eslint --cache --max-warnings 0 \"{src,types}/**/*.{vue,js,jsx,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write \"{src,types}/**/*.{vue,js,jsx,ts,tsx,json,css,less,scss,html,md}\"",

vite.config.ts

@@ -13,7 +13,7 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
   const { VITE_PUBLIC_PATH } = viteEnv;
   return {
     /** 打包时根据实际情况修改 base */
-    base: VITE_PUBLIC_PATH,
+    base: VITE_PUBLIC_PATH || "/",
     resolve: {
       alias: {
         /** @ 符号指向 src 目录 */