基于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

博客后端

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

    原文作者:飞翔的荷兰人
    原文地址: https://segmentfault.com/a/1190000014973374
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞