开发过程中的坑

1.vuex持久化插件不能使用

使用vuex持久化插件会报 “客户端与服务端数据不相同”的warn

2.Cookie的获取比较麻烦

看网上很多都是用脚手架构建环境后又npm i aixos ，其实nuxt脚手架已经帮我们集成了@nuxt/axios

做Cookie登录状态保持，可以看一下这位大哥文章

https://www.jianshu.com/p/198e6e97cc3e

这位大哥封装的axios非常好用

3.一个asyncData()函数可以多次请求

可以使用async await 一次retrun所有值（每个retrun的key是在data中已经定义的）

粒子

async asyncData({  isDev,  route,  store,  env,  params, query, req, res, redirect, error }) {
    //*全部请求置于vuex中
    const bannerList = await store.dispatch('homeBanner')  
    const hotPush = await store.dispatch('hotPush', { limit: 8 })  
    const hotPushTags = await store.dispatch('hotPush_tags')  
    const newEst = await store.dispatch('newEst')
    return {
      bannerList: bannerList.banners,
      hotPush: hotPush.result,
      hotPush_tags: hotPushTags.tags,
      newEst: newEst.albums
    }
  },
  data() {
    return {
      bannerList: [],
      hotPush: [],
      hotPush_tags: [],
      newEst: []
    }
  }
  ......

4.Nuxt的Router是自动生成的！！！

不要妄想去手动改.nuxt文件夹中的router，因为它会在下次编译中被覆。

nuxt的router是通过pages文件夹的文件放置层级自动生成的

吼吼，简单的连线

部署过程中的坑

pm2进程守护

因为我现在联系的demo是网易云音乐的web端，使用是NeteaseCloudMusicApi提供的Api，为nodejs，所以必须得pm2

部署流程

首先在本地把nuxt项目进行打包

npm run build

打包完毕后复制下面四个文件夹、文件粘贴到服务器

.nuxt
static
nuxt.config.js
package.json

我使用的是阿里云的学生服务器，系统是windows server 2012r2，使用的是Nginx 1.16.1版本

到nuxt文件夹下

npm install

下载node_modules

下载完成后安装pm2

pm2的安装过程不再赘述

重点来了

pm2安装好后首先进入NeteaseCloudMusicApi的文件夹运行cmd，输入命令

pm2 start app.js
//一定要加.js后缀，不然会报错找不到的

运行后会看到一个表格

这说明api的app.js已经运行成功了，这时就不用再去单独启动node的app.js了

现在我们去nuxt文件夹把nuxt进程也加入pm2

此时加入nuxt的方法和启动node的方法不一样，网上有很多方法，但是我挨个尝试后pm2的状态不是Error就是stopped，启动失败

在尝试了几次后终于成功了，命令如下

//先进入nuxt文件夹下打开cmd
输入
pm2 start  node_modules/nuxt/bin/nuxt.js -- start

喜大普奔，运行成功

配置启动Nginx服务器

当服务器本地运行成功nuxt和其他服务后，打开nginx的conf文件夹，打开nginx.conf文件。

因为是ssr服务端渲染，nginx需要配置地址重写，可以参考我的配置


worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;
	gzip_types text/plain application/javascript text/css;
	
    upstream nodenuxt {
            server localhost:9999; # nuxt 项目监听PC端端口
            keepalive 64;
    }
	upstream musicapi{
			 server localhost:9998; # 网易云api监听端口
             keepalive 64;
	}

    server {
        listen       80;
        server_name  localhost;

		# location / {
        #     root   html;
        #     index  index.html index.htm;
        # }

        location / {
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_cache_bypass $http_upgrade;
            proxy_pass http://nodenuxt;
        }
    }
	
	server {
        listen       81;
        server_name  localhost;
		
		location / {
			proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_cache_bypass $http_upgrade;
            proxy_pass http://musicapi;
		}
    }

}

这里我开了两个端口，80和81，分别监听到localhost本地的端口

80是nuxt的网页端口

81是api的端口，方便我线下开发

( 服务器的安全组规则中记得添加nginx中添加的端口，不然请求不到 )

最后运行nginx.exe或者命令行输入

nginx

即可运行

大功告成

这时右键查看网页源代码你会发现已经不是spa单页面的那孤零零的几行代码了，这时SEO会很友好

不信？？？

在？看看爬虫？

是不是首页数据都爬到了呢哈哈

Nuxt开发+pm2部署 踩坑自记