本人博客最初是用vue做的单页面应用，且采用history模式，去掉了 `#`，看起来就像一个正常的多页面网站，同时页面体验也比多页面的好。

然鹅单页面应用的缺点还是很明显的，就是首屏和seo问题。

首屏这个问题本人已经通过gzip解决了，就算是最差的服务器配置，加载也很快。

seo始终是个问题，毕竟搜索引擎爬虫只能抓到首页的标题、关键词和描述，却无法获取到页面上真正的内容，而且每个内页的内容也无法抓到，如下图所示：

页面的内容和爬虫能抓到的内容不一样，无法获取到实际的东西，这样对搜索引擎优化就不好了，

采用ssr渲染后，如下图：

而且使用sitemap生成器模拟爬虫抓取，也能抓到网站下的子页面，如下图

下面开始讲讲nuxt部署流程。

1.首先用nuxt脚手架创建项目

npx create-nuxt-app <项目名>

npx在NPM版本5.2.0默认安装了，可以直接使用。

本人选择的脚手架配置是：

Express + Universal模式 + axios module + EsLint + Prettier 

2.新建好项目后，目录结构如下

• 资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
• 组件目录 components 用于组织应用的 Vue.js 组件。注意，组件下无法使用fetch或asyncData .
• 布局目录 layouts 用于组织应用的布局组件。
• 中间件目录 middleware 目录用于存放应用的中间件。
• 页面目录 pages 用于组织应用的路由及视图。
• 插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
• 静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。
• store 目录用于组织应用的 Vuex 状态树 文件。
• nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。
• package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。

3.这边就不说开发过程了，github源码都有。

4.本地开发并测试没问题后，就可以准备部署了。

Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署 和 静态应用部署。

我采用的是服务端渲染应用部署，配置文件里的命令如下：

打开命令行，执行build后，可以本地start启动看看效果

run run build 
#或
nuxt build

#再
npm run start



如果要使用 静态应用部署，执行完命令，把dist文件夹复制到服务器根目录就行。

npm run generate

5.build编译构建完成后，会生成 .nuxt 目录。

然后我们把.nuxt目录，server目录(如果有的话)，static目录，nuxt.config.js，package.json 复制到服务器上的web根目录

6.复制到服务器，先安装依赖项

npm install
#建议用淘宝镜像源 cnpm，比较稳定快速

7.安装完依赖后，尝试启动nuxt服务

npm run start
#或
nuxt start

如果出现以下结果，说明nuxt服务启动成功！



8.然后把nuxt服务先停掉，改用pm2启动nuxt长服务，实时在线运行。

首先先新建一个 pm2system.config.js ，

/* pm2system.config.js
 * pm2 start pm2system.config.js
 */
module.exports = {
  apps: [
    {
      name: 'my-blog', // 项目名称
      cwd: './', // 当前工作路径
      script: 'npm', // 实际启动脚本
      args: 'run start', // 参数
      autorestart: true,
      watch: true, // 监控变化的目录，一旦变化，自动重启
      watch_delay: 10000,
      ignore_watch: ['node_modules'], // 从监控目录中排除
      watch_options: {
        'followSymlinks': false,
        'usePolling': true
      }
    },
    {
      name: 'test-env', // 项目名称
      cwd: './', // 当前工作路径
      script: 'npm', // 实际启动脚本
      args: 'run start', // 参数
      autorestart: true,
      watch: true, // 监控变化的目录，一旦变化，自动重启
      watch_delay: 10000,
      ignore_watch: ['node_modules'], // 从监控目录中排除
      watch_options: {
        'followSymlinks': false,
        'usePolling': true
      }
    }
  ]
}

然后启动项目。

以后部署更新文件时，pm2就会自动重启任务了

$ pm2 start pm2system.config.js
# 多个pm2配置任务时，可指定要启动的任务
$ pm2 start pm2system.config.js --only test-env

后续会加一下自动部署功能...

未完待续....To be continued