隨著vue3的成熟，vue2將在2023.12.31停止維護(hù)，所以有必要搞一下vue3項(xiàng)目靜態(tài)頁(yè)面怎么部署到gitee中了
如果還有想部署vue2靜態(tài)頁(yè)面到gitee中的話(huà)，訪(fǎng)問(wèn)https://blog.csdn.net/qq_45952585/article/details/122514028?spm=1001.2014.3001.5502
vue3+vite+ts腳手架創(chuàng)建就不寫(xiě)了，隨便搜一搜，一大把，直接上重點(diǎn)

gitee創(chuàng)建開(kāi)源倉(cāng)庫(kù)

1. 倉(cāng)庫(kù)名字自定義 ，例如我的倉(cāng)庫(kù)名字是vue3_viteapp；
2. 一定是要開(kāi)源

修改項(xiàng)目部署到gitee中

1.修改vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
    base: process.env.NODE_ENV === 'production' ? "/vue3_viteapp" : "/",
    plugins: [vue()],
    server: {
        proxy: {
            '/api': {
                target: 'http://192.168.1.10:9999',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '/api')
            },
           
        }
    }
})

注意base屬性，這個(gè)是最關(guān)鍵的，process.env.NODE_ENV當(dāng)為production的時(shí)候，是代表生產(chǎn)環(huán)境，就一定要加上gitee開(kāi)源倉(cāng)庫(kù)的倉(cāng)庫(kù)名，否則本地的話(huà)就直接斜杠，也就是默認(rèn)。不要問(wèn)為什么，因?yàn)槲乙膊恢?，部署到gitee中生成靜態(tài)頁(yè)面的鏈接就需要這樣寫(xiě)才能訪(fǎng)問(wèn)到

2.找到router文件

// router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router';

// 導(dǎo)入組件
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import index from '../views/index.vue';
import list from '../views/list.vue';
import news from '../views/list/news.vue';
import system from '../views/list/system.vue';

// 定義路由規(guī)則
const routes = [
    { path: '/home', component: Home },
    { path: '/about', component: About },
    { path: '/', component: index },
    { 
        path: '/list', 
        component: list ,
        children: [
            {
                path: 'news',
                component: news,
            },
            {
                path: 'system',
                component: system,
            },
        ]
    },
];

// 創(chuàng)建并導(dǎo)出路由實(shí)例
export const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

注意history一定是要createWebHashHistory模式，也就是vue2里面的hash模式，也就是在鏈接后面加/#/這種

如果你用了createWebHistory也不是不可以，就是有點(diǎn)麻煩，需要在路由上面都加上倉(cāng)庫(kù)名字，首頁(yè)默認(rèn)是/，那么就要改成/vue3_viteapp,例如

const routes = [
    { path: '/vue3_viteapp', component: index },
    { 
        path: '/vue3_viteapp/list', 
        component: list ,
        children: [
            {
                path: 'news',
                component: news,
            },
        ]
    },
];

還有用createWebHistory模式的話(huà)，部署到gitee中，切換到其他路由，再次刷新會(huì)報(bào)404，這個(gè)時(shí)候就得創(chuàng)建一個(gè)404.html，把打包后的index.html中的代碼全部復(fù)制到404.html就可以了
所以如果沒(méi)有特殊要求的話(huà)，就用createWebHashHistory模式，以免有上述這些麻煩

3.修改.gitignore文件，把里面的dist注釋掉，也就是dist也要提交到gitee里面中，不清楚為什么的話(huà)就先繼續(xù)往下看

4.執(zhí)行打包腳本生成dist

5.初始化本地git倉(cāng)庫(kù)，git提交流程就不寫(xiě)了，提交到gitee后，如圖所示

點(diǎn)擊圖上所圈出來(lái)的，再如圖所示

部署分支，就是當(dāng)前提交的分支，上面第三條有說(shuō)到，為什么要把dist也提交上來(lái)，為的是在這個(gè)分支里面有dist目錄，那么部署目錄，就選擇dist就ok，然后點(diǎn)擊更新就會(huì)生成一個(gè)鏈接，訪(fǎng)問(wèn)這個(gè)鏈接就可以了，你會(huì)發(fā)現(xiàn)鏈接后面會(huì)默認(rèn)有一個(gè)倉(cāng)庫(kù)的名字，只有加上倉(cāng)庫(kù)名字，gitee生成的鏈接才能訪(fǎng)問(wèn)到我們的項(xiàng)目

6.ok的了，差不多這些操作，就可以實(shí)現(xiàn)部署，如果有疑問(wèn)的或者文章中有錯(cuò)誤的，可以留下評(píng)論，如果有小伙伴挺急的話(huà)，就+q515773148，很快會(huì)收到，共同進(jìn)步，歡迎來(lái)搞，感謝支持。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-767943.html

到了這里，關(guān)于vue3+vite靜態(tài)頁(yè)面部署到gitee pages的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！