跳转至

使用 Lovable.dev 生成網站並推送到 GitPage 服務 純前端

介紹

作業環境：Windows
服務管理：
主要應用：Lovable.dev
功能重點：
    a. 將 Lovable.dev 生成後同步至 Github 的專案克隆至本地
    b. 重新打包後推送到 GitPage 服務，確認功能正常

先按照 lovable clone to github 自帶的 README.md 操作

Follow these steps: 

# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>

# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>

# Step 3: Install the necessary dependencies.
npm i

# Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev


npm install ncp --save-dev

路徑調整(非必要)

找到標籤，將調整 BrowserRouter -> HashRouter

src/App.tsx
import { BrowserRouter, Routes, Route } from "react-router-dom";

因為我資料夾有區分不同路徑，所以我這邊會更改路徑

vite.config.ts
export default defineConfig(({ mode }) => ({
  base: "/page1/",

一鍵打包

npm run build

先 build 完才會長出 dist

# 安裝 ncp 套件
npm install -g ncp

# 佈署
npm run deploy
package.json
 "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "lint": "eslint .",
    "preview": "vite preview",
    "deploy": "ncp dist E:/unhappy/metaKeyValut && cd E:/unhappy/metaKeyValut && git add . && git commit -m \"Update meta-key-valut build\" && git push"
  },

ncp dist 是將 dist 複製到指定路徑下 接著切換到該路徑下，用 git 指令檔案推送到 gitpage

commit message error 

error: pathspec 'repo1' did not match any file(s) known to git
error: pathspec 'build'' did not match any file(s) known to git
這代表 commit 訊息有問題，記得是用 \"將訊息包起來