跳转至

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

介紹

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

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

Follow these steps:
```bash 
# 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

```jsx title="src/App.tsx" showLineNumbers import { BrowserRouter, Routes, Route } from "react-router-dom"; 

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

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

一鍵打包

npm run build

先 build 完才會長出 dist

# 安裝 ncp 套件
npm install -g ncp

# 佈署
npm run deploy

json title="package.json" showLineNumbers "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 訊息有問題，記得是用 \"將訊息包起來