基於nuxt.js的vue服務端渲染我的博客

vue服務端渲染博客，基於nuxt

Github地址

安裝

git clone git@github.com:Hzy0913/my-blog.git

安裝包依賴

npm install

運行

運行發開環境

npm run dev

本地訪問http://localhost:3000

打包部署

tip:生產環境打包須要在服務端進行！
首先打包編譯項目

npm run build

運行項目

npm run start

推薦生產環境使用以下命令執行pm2部署

推薦全局安裝pm2

第一次部署使用firstserver命令

npm run firstserver

之後每次更新代碼執行server命令

npm run server

暫停服務執行stop命令

npm run stop

查看服務狀態執行list命令

npm run list

該命令會編譯打包項目，而後啓動一個pm2守護進程服務，具體可見package中的npm script

項目說明

• 使用nuxt.js的vue服務端渲染ssr.
• 使用element-ui 組件庫.
• 使用axios請求庫
• 使用github的Oauth受權登陸，評論系統
• 使用marked解析markdown文檔
• 使用highlight完成代碼格式語法高亮

在線預覽

See BinLive.

本地預覽

想要在本地開發環境運行完整線上模式，能夠轉發調用binlive線上環境接口。
修改nuxt.config.js文件

// 將下面接口調用地址
proxy: [
  ['/api', { target: 'http://localhost:3080' }]
]
// 修該成binlive線上地址
proxy: [
  ['/api', { target: 'http://binlive.cn:3080' }]
]

修改plugins/axios.js文件

// 將下面接口調用地址
if (process.server) {
  options.baseURL = 'http://localhost:3080'
}
// 修該成binlive線上地址
if (process.server) {
  options.baseURL = 'http://binlive.cn:3080'
}

commit

因爲spa對於seo不友好，重構了以前使用vue的spa形式的博客，使用nuxt.js

博客後端

博客的後端以及後臺管理系統項目爲博客後端項目。