使用nuxtjs实现vue项目的同构渲染（客户端渲染+服务器端渲染）

使用nuxt.js 可以解决vue项目中的SEO优化+首屏加载时间长出现白屏的问题

实际开发中，简单项目使用nuxtjs默认的路由规则就可以
但是在复杂的项目内，用nuxtjs默认的路由规则反而会变得十分麻烦，因此在复杂的项目内，通常通过手动配置nuxtjs的路由规则来实现
手动配置nuxtjs的路由规则：
1、在项目的根目录下（和package.json同一级目录下）新建一个文件，文件名叫：nuxt.config.js
2、在nuxt.config.js文件写输入如下代码：

export default {
  router: {
    // 自定义nuxtjs的路由规则
    extendRoutes(routes, resolve) {
      // 清除 Nuxt.js 基于 pages 目录默认生成的路由表规则
      // 把nuxtjs中默认的路由规则全部删除不要了
      routes.splice(0)
      // 添加自己配置的路由规则给nuxtjs来使用，结构和vue原始的路由结构一样
      routes.push(
        ...[
          {
            path: '/',
            component: resolve(__dirname, 'pages/layout/'), // nuxtjs中的页面组件
            children: [
              {
                path: '', // 默认子路由
                name: 'home',
                component: resolve(__dirname, 'pages/home/'), // nuxtjs中被页面组件，包裹的子组件（路由组件）
              },
            ],
          },
        ]
      ) 
    },
  },
}

nuxtjs项目在服务器端发布部署->最简单的部署项目的方式

• (1) 配置host+port (在nuxt.vonfig.js文件中配置)

server: {
      host: '0.0.0.0',
      port:3000
},

• (2) 压缩发布包,把打包后的项目的一些文件进行压缩，文件包括：

把上面这几个文件、文件夹，进行压缩，然后把压缩包传递给服务器端

• (3) 把发布包传到服务器端（用xftp软件、用git软件、用xshell中的linux的命令）

(3-1) 在自己电脑上连接上远程的服务器

(3-2) 在远程的服务器的根目录下创建一个文件夹：

• (4) 在服务器端解压

• (5) 在服务器端安装依赖

• (6) 在服务器端启动服务看效果

nuxtjs项目在服务器端发布部署->使用PM2启动Node服务

上面的这种方式，在服务端启动的项目会占用命令行
命令行窗口一但关闭或者命令一但退出，项目就无法访问了
为了解决这个问题，我们可以项目运行在服务器的后台进程中，因此就需要使用PM2这个工具了

使用pm2启动服务端项目

pm2的githup仓库地址：https://github.com/Unitech/pm2
官方文档：https://pm2.io/

• (1) 在服务器端安装pm2

• (2) 在服务器端使用pm2启动项目【pm2 start 脚本路径/启动项目的npm命令 】

• (3) 在浏览器输入【服务器的IP地址:端口号】 查看效果

• (4) 在服务器端关闭pm2启动的项目

• (5) pm2的常用命令

nuxtjs项目在服务器端发布部署->现代化的部署方式->自动化部署（CI/CD）

CI/CD服务

环境准备

• (1) 有一台Linux系统的服务器
• (2) 把代码提交到GitHub远程仓库
• (3) 配置GitHub Access Token如下：

然后会生成一个令牌（下方截图），这个令牌要保存好，因为后期就再也看不见了
如果没有保存，后期忘记了，只能重新在生成一个新的令牌了

• (4) 配置GitHub Actions 执行脚本

• (5) 在项目的根目录下配置PM2的配置文件，文件名字叫【pm2.config.json】，代码如下：

{
 "apps": [
   {
     "name": "RealWorld",
     "script": "npm",
     "args": "start"
   }
 ]
}

• (6) 把本地代码提交到远程仓库

• (7) 提交更新去开始自动化部署

• (8) 查看自动化部署的进度和状态

点击Aaction按钮后，页面的截图如下所示，说明自动化部署成功：

• (9) 访问网站

• (10) 项目有调整，重复执行（6）~(10)

购买完服务器后主机后，【首次登陆 ssh root@主机ip】 提示ssh_exchange_identification: read: Connection reset by peer

• 尝试的解决办法：https://www.jianshu.com/p/84dce470178c
• 尝试的解决办法：https://www.cnblogs.com/Tanwheey/p/11976178.html
• 还有一种可能就是公司网络限制了，只能用手机流量去测试一下是否可以成功登录

题外话：
CentOS的回收站目录应该是这个路径：cd ~/.local/share/Trash/files/ 这个路径是隐藏属性的
删掉一个目录下所有的文件的命令: rm -rf *