搭建属于你的个人博客-基于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

博客后端

博客的后端以及后台管理系统项目为博客后端项目。