Vuepress生成文檔部署到gitee.io注意事項(xiàng)

1.靜態(tài)資源要放在.vuepress/public目錄下，比如創(chuàng)建一個(gè)assets/img/目錄。把圖片文件放在目錄下面。

2.本地開(kāi)發(fā)的時(shí)候，每次更新文件后，需要運(yùn)行 vuepress dev .命令重新發(fā)布。

3.運(yùn)行vuepress build .命令會(huì)編譯出來(lái)一個(gè)靜態(tài)文件的dist目錄。只要把這個(gè)目錄的東西push到gitee。

4.在gitee里創(chuàng)建一個(gè)新的倉(cāng)庫(kù)。比如https://gitee.com/xxxxxx/repo.git倉(cāng)庫(kù)的話，通過(guò)gitee pages服務(wù)會(huì)生成一個(gè)http://xxxxxx.gitee.io/repo的靜態(tài)文件網(wǎng)站。注意vuepress工程的config.js配置里必須配置base:'/repo/'設(shè)定基礎(chǔ)目錄。

追述：

1.#vuepress eject把默認(rèn)theme下載到項(xiàng)目的目錄里。

這樣project\.vuepress\目錄下會(huì)多一個(gè)theme的目錄，里面是模板文件。 

 關(guān)鍵一：要?jiǎng)?chuàng)建一個(gè)package.json，

{
  "name": "vuepress-theme-xxx",
  "version": "1.4.3",
  "description": "a theme for vuepress",
  "main": "index.js"
}

里面定義這個(gè)模板的名稱(chēng)，vuepress-theme-xxx

然后編輯index.js模板的入口文件，這里只要設(shè)定繼承默認(rèn)模板就行了。其他開(kāi)發(fā)模板參考vuepress官網(wǎng)

const path = require('path')
 
// Theme API.
module.exports =  {
  extend: '@vuepress/theme-default'
}

這樣，模板就搭建好了，修改模板就去改layouts目錄下的layout.vue和components目錄下的組件就可以。

3.使用

修改.vuepress目錄下的config.js，vuepress的入口文件。

module.exports = {
    theme:"xxx"  //這里因?yàn)榍懊婺０迮渲美?，package.json里定義的theme名為"vuepress-theme-xxx"，前面的vuepress-theme可以省略。
}

在gitee中部署VuePress博客問(wèn)題

首先下載VuePress和博客主題

cnpm i vuepress @vuepress-reco/theme-cli –g 

進(jìn)入文件夾“G:\GiteeRepositories”，并打開(kāi)dos窗口

theme-cli init lijiang_blog #項(xiàng)目名
cd lijiang_blog 
cnpm i #安裝依賴
cnpm run dev #項(xiàng)目運(yùn)行

（注意：這里有三種可以選，分別是blog，doc,和afternoon xxx，這里選擇blog就行。afternoon xxx這個(gè)是一個(gè)成熟的示例，需要的話可以單獨(dú)下載參考其代碼。doc和blog區(qū)別不大）

然后打包，注意，在打包之前，一定要在G:\GiteeRepositories\lijiang_blog\docs\.vuepress中的config.js中添加一行代碼，用來(lái)設(shè)置站點(diǎn)根路徑：

base: '/lijiang_blog/' #這里的“Lijiang_blog”為等會(huì)在gitee上創(chuàng)建的倉(cāng)庫(kù)名

然后打包：npm run build

接著去碼云新建倉(cāng)庫(kù)：https://gitee.com/projects/new

切記：倉(cāng)庫(kù)名要小寫(xiě)！！

gitee上創(chuàng)建倉(cāng)庫(kù)后，再去本地磁盤(pán)初始化一個(gè)文件夾，再將此文件夾連接到gitee倉(cāng)庫(kù)。

依次執(zhí)行以下的命令

git init
git remote add origin “剛剛創(chuàng)建的項(xiàng)目的http://gitee.com/xxx”
git add .
git commit –m ‘a(chǎn)sdf'
git push origin master –u

點(diǎn)擊啟動(dòng)按鈕后，不到半分鐘就能部署好項(xiàng)目

這樣就可以訪問(wèn)了。這是我部署的：http://lidajiang.gitee.io/lijiang_blog/

后面在本地添加文章后，將項(xiàng)目推送到gitee，點(diǎn)服務(wù)按鈕，在打開(kāi)的頁(yè)面中點(diǎn)擊更新就行

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。