说在前面的话
vue.js开发的SPA是不利于seo的，搜索引擎对它支持的并不是太好，百度根本就不可以在SPA应用的页面抓取数据，这对很看重seo优化的网站来说肯定是不能容忍的。而使用nuxt开发的网站就可以让爬虫爬取，而且它是基于vue.js开发的服务端渲染应用框架，上手极快，大大的简化了SSR的开发难度。
基于vue3的nuxt3请查看：https://blog.csdn.net/dan_seek/article/details/140079231
本机环境和部署环境
操作系统：Windows10、centos7
nodejs：v13.0.1
npm： v6.12.0
nuxtjs：v2.8
下面的操作npm版本最低要v5.2哦
如果版本太低请先使用n命令升级
1.先全局安装工具n：
npm install -g n
1
2.升级node.js到最新稳定版
n stable
1
创建nuxt项目
1、使用create-nuxt-app脚手架创建项目,项目名test-nuxt
npx create-nuxt-app test-nuxt
1
或者用yarn ：
yarn create nuxt-app test-nuxt
1
接下来创建向导会让你做些选择，这些选择都是为了更方便的搭建项目用的，选错了也没关系，后续可以在项目里修改
// 第1步 项目名
? Project name (test-nuxt)
// 第2步 项目描述
? Project description (My mind-blowing Nuxt.js project)
// 第3步 输入作者
? Author name ()
// 第4步 选择包管理工具，这里我选择npm
? Choose the package manager
Yarn
Npm
// 第5步 选择UI框架
? Choose UI framework (Use arrow keys)
None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Element
Framevuerk
iView
Tachyons
Tailwind CSS
Vuetify.js
// 第6步 选择默认服务器
? Choose custom server framework
None (Recommended)
AdonisJs
Express
Fastify
Feathers
hapi
Koa
Micro
// 第7步 选择安装axios,使用空格选中
? Choose Nuxt.js modules
(*) Axios
( ) Progressive Web App (PWA) Support
// 第8步 选择安装eslint
? Choose linting tools (Press to select, to toggle all, to invert selection)
( ) ESLint
( ) Prettier
( ) Lint staged files
// 第9步 选择安装测试框架
? Choose test framework (Use arrow keys)
None
Jest
AVA
//第10步 这里一定要选择ssr,否则还是单页应用
? Choose rendering mode (Use arrow keys)
Universal (SSR)
Single Page App
//第11步 是否生成jsconfig配置
( ) jsconfig.json (Recommended for VS Code)
// 然后就等待片刻
\ Installing packages with npm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
2、启动，进入test-nuxt目录运行
npm run dev
1
然后就可以使用 http://localhost:3000 访问了
部署nuxt项目
1、先build项目，在test-nuxt目录执行下面命令，或者使用webstorm中的build
npm run build
1
2、服务器新建一个目录，用来放打包后的项目文件（比如：/mnt/projects/nuxt）
3、把package.json、nuxt.config.js、static目录、.nuxt目录共4个拷贝至服务器（比如：nuxt目录）
4、进入nuxt目录，执行 npm install 安装依赖
npm install
1
5、启动服务
npm start
1
nuxt默认端口是3000，如果想要修改，需要在nuxt.config.js添加如下配置：
server: {
port: 9000, // default: 3000
host: '127.0.0.1', // default: localhost
},
1
2
3
4
注意：上面的host配置，centos7写localhost，nuxt服务会起不来
6、配置nginx，可以使用域名访问
server{
listen 443;
server_name t.xxx.cn;
ssl on;
ssl_certificate /etc/nginx/cert/t/2051951_t.xxx.cn.pem;
ssl_certificate_key /etc/nginx/cert/t/2051951_t.xxx.cn.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
# 如果不需要https访问，把上面的删除，修改成下面两行
# listen 80;
# server_name t.xxx.cn;
location / {
proxy_pass http://localhost:3000; # 反向代理至nuxt服务器
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
然后在域名解析里配置一条A记录指向服务器IP，如果是https还得配置一条txt记录
7、reload nginx服务
nginx -s reload
1
这个时候，我们就可以使用https://t.xxx.cn访问刚刚部署的网站了
安装pm2
当我们执行上面的操作后，我们的项目已经可以跑起来了，但是关闭shell后，就访问不了了。而pm2是一个进程管理工具，它可以让nuxt进程在后台运行。
1、全局安装pm2
npm install pm2 -g
1
2、使用pm2管理nuxt进程，让它常驻后台，先进入项目目录，然后执行下面命令（比如：nuxt目录）
pm2 start npm --name "test-nuxt" -- start
1
这里的name取一个有意义的就行，不需要和 package.json里面的name {“name”: “test-nuxt” … }对应。
其他
怎么关闭呢？使用stop即可，后面可以接id或者name
pm2 stop 0 #或者 pm2 stop "test-nuxt"
1
启动 pm2 start 0 ；重启 pm2 restart 0
使用pm2 list可以查看当前正在运行的进程
pm2 list
