搭建和部署nuxt项目_nuxt3 修改端口

说在前面的话

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 <space> to select, <a> to toggle all, <i> 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
1