vuepress踩坑記

朱亮發表於2018-04-17
Vue

vuepress是尤大大4月12日釋出的一個全新的基於vue的靜態網站生成器，實際上就是一個vue的spa應用，內建webpack，可以用來寫文件。恰好最近需要為一些元件寫文件，就動手擼了一波，畢竟剛釋出，遇到不少坑，最終還是磕磕碰碰的執行起來了，為了避免大家踩同樣的坑，特意將搭建的過程記錄下來，分享一波。

以下是幾個已知的問題

  • 因為util.promisify是在node 8.0之後引入的，所以如果你不想像我一樣浪費三個小時的時間，請檢視並且更新node版本

  • 建議不要使用webpack-simple的模板進行試驗，否則會各種執行不起來╮(╯▽╰)╭

  • 使用cli的模板如果報錯TypeError: Cannot read property 'vue' of undefined 是因為vuepress內建的webpack的vueloader使用的版本和你本地的不一樣，請將本地的版本更新到穩定最新版本

  • 當出現安裝官方文件部署之後一直跳轉到404的情況時，請使用路由的雜湊模式來訪問

  • 如遇到埠衝突等問題，在docs目錄下新建.vuepress資料夾，然後新建config配置檔案對prot埠項進行配置即可，具體可參照官方文件

  • 全域性安裝之後專案中再安裝的話依賴會衝突，引發Module build failed: CssSyntaxError ，建議寫在全域性的vuepress

開始使用

使用cli新建一個webpack模板專案

    //進入專案首先安裝依賴
    npm install
    
    //將vue-loader進行版本替換，使其和vuepress內建的webpack裡的vue-loader保持一致，否則會報錯（不過尤大大已經在解決版本衝突的問題了，版本待發）
    npm install vue-loader@15.0.0-rc.2 --save-dev
    
    //接下來安裝vuepress
	npm install -D vuepress
	
	mkdir docs
	
	echo "# Hello VuePress" > docs/README.md
	
	//最後一步啟動vuepress
	npx vuepress dev docs
	
	//使用vuepress build即可完成對專案的打包
	
	//接下來就是按照官方的文件，對你的網站進行各種創造啦
	
複製程式碼

專案部署的話我使用的是github，具體操作請參照官方文件

示例網站

github地址

剩下的主題配置參照官方文件的配置詳解就OK了，這裡就不在贅述

相關文章