搭建和部署nuxt项目

说在前面的话

vue.js开发的SPA是不利于seo的，搜索引擎对它支持的并不是太好，百度根本就不可以在SPA应用的页面抓取数据，这对很看重seo优化的网站来说肯定是不能容忍的。而使用nuxt开发的网站就可以让爬虫爬取，而且它是基于vue.js开发的服务端渲染应用框架，上手极快，大大的简化了SSR的开发难度。

本机环境和部署环境

操作系统：Windows10、centos7

nodejs：v13.0.1

npm： v6.12.0

nuxtjs：v2.8

下面的操作npm版本最低要v5.2哦

如果版本太低请先使用n命令升级

1.先全局安装工具n：

npm install -g n

2.升级node.js到最新稳定版

n stable

创建nuxt项目

1、使用create-nuxt-app脚手架创建项目,项目名test-nuxt

npx create-nuxt-app test-nuxt

或者用yarn ：

yarn create nuxt-app test-nuxt

接下来创建向导会让你做些选择，这些选择都是为了更方便的搭建项目用的，选错了也没关系，后续可以在项目里修改

// 第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)
> NoneAnt Design VueBootstrap VueBuefyBulmaElementFramevuerkiViewTachyonsTailwind CSSVuetify.js// 第6步 选择默认服务器? Choose custom server frameworkNone (Recommended)AdonisJsExpressFastifyFeathershapi
> KoaMicro// 第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)
> NoneJestAVA//第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

2、启动，进入test-nuxt目录运行

npm run dev

然后就可以使用 http://localhost:3000 访问了

部署nuxt项目

1、先build项目，在test-nuxt目录执行下面命令，或者使用webstorm中的build

npm run build

2、服务器新建一个目录，用来放打包后的项目文件（比如：/mnt/projects/nuxt）

3、把package.json、nuxt.config.js、static目录、.nuxt目录共4个拷贝至服务器（比如：nuxt目录）

4、进入nuxt目录，执行 npm install 安装依赖

npm install

5、启动服务

npm start

nuxt默认端口是3000，如果想要修改，需要在nuxt.config.js添加如下配置：

  server: {port: 9000, // default: 3000host: '127.0.0.1', // default: localhost},

注意：上面的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服务器} }

然后在域名解析里配置一条A记录指向服务器IP，如果是https还得配置一条txt记录

7、reload nginx服务

nginx -s reload

这个时候，我们就可以使用https://t.xxx.cn访问刚刚部署的网站了

安装pm2

当我们执行上面的操作后，我们的项目已经可以跑起来了，但是关闭shell后，就访问不了了。而pm2是一个进程管理工具，它可以让nuxt进程在后台运行。

1、全局安装pm2

npm install pm2 -g

2、使用pm2管理nuxt进程，让它常驻后台，先进入项目目录，然后执行下面命令（比如：nuxt目录）

pm2 start npm --name "test-nuxt" -- start

这里的name取一个有意义的就行，不需要和 package.json里面的name {“name”: “test-nuxt” … }对应。

其他

怎么关闭呢？使用stop即可，后面可以接id或者name

pm2 stop 0 #或者 pm2 stop "test-nuxt"

启动 pm2 start 0 ；重启 pm2 restart 0

使用pm2 list可以查看当前正在运行的进程

pm2 list