- 找到
nuxt.config.js，添加下面代码：
export default { head: {...}, css: [...], // 配置服务器（主要是这个配置） server: { // port: 8000, // default: 3000 host: '0.0.0.0', // default: localhost (推荐) // host: '0', // 等于 host: '0.0.0.0' 这样配置，在mac上这么配置没问题，但是在window上这么配置有报错。 timing: false },
- 再次运行项目，生产或开发都行，访问地址就会变成本机的
ip地址加端口：
╭─────────────────────────────────────────╮ │ │ │ Nuxt @ v2.14.12 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: server-side │ │ ▸ Target: server │ │ │ │ Memory usage: 29.4 MB (RSS: 74 MB) │ │ │ │ Listening: http://10.0.93.169:3000 │ │ │ ╰─────────────────────────────────────────╯
- 本地运行项目就到这里结束了，下面需要将项目发布到服务器运行起来。
四、Nuxt.js 上传服务器（Nginx + Node + PM2）
- 下面的这些操作如果需要测试，可以放在本地机器上进行搭建，把本地电脑当服务器使使。
服务器安装Nginx + Node + PM2。Nuxt.js是依赖Node，所以服务器需要安装Node，装了Node就会自带NPM，然后通过NPM安装PM2:
$ npm install -g pm2 // 可以通过 -h 查询使用方式 $ pm2 -h
PM2是Node的进程管理工具。为啥用这个？举个例子：运行项目之后，命令行窗口是不能关闭的，如果关闭了就无法访问这个项目地址了，所以需要支持关闭命令行窗口，运行的项目依然能够访问，也就是后台挂起进程，PM2就可以做到这个事情。- 安装好上面环境，在
Nginx根目录里面通过Git拉下来Nuxt.js源码，可以新开文件夹存放也是可以的，随你自己
$ git clone xxxxx.git // 如果存在代码就拉一下代码 保持最新 $ git pull
- 这里说一下，在网上搜一下会搜到很多只需要导入几个文件就可以运行项目的文章，但是这种方式有时候会出现
编译函数找不到、资源文件找不到之类的问题，所以如果不是特别熟悉Nuxt.js的话，直接将整个项目拉下来使用，不需要去单独导入某些文件，这样也完美的避开一些细节上的坑，网上的文章一般都是推荐导入下面几个文件：
.nuxt static nuxt.config.js package.json package-lock.json
- 将代码拉到服务器后，需要先走一遍
npm安装，安装一下依赖包
$ npm install
- 然后编译项目
$ npm run build
PM2运行项目，后台挂起，你的项目名称，可以随意填个，但是推荐跟项目package.json文件里面的name字段值一样，这样好区分。。
// 之前是通过 $ npm run dev 或者 $ npm run start，但是命令行窗口不能关闭 // 启动开发环境后台挂起，列举了常用的几种方式，任意选一种 $ pm2 start npm -- run dev $ pm2 start npm --name "你的项目名称" -- run dev $ pm2 start ./node_modules/nuxt/bin/nuxt.js .... // 启动生产环境后台挂起，列举了常用的几种方式，任意选一种 $ pm2 start npm -- run start $ pm2 start npm --name "你的项目名称" -- run start .... // 例如：服务器启动开发环境，开发环境只需要一行命令 $ pm2 start ./node_modules/nuxt/bin/nuxt.js // 例如：服务器启动生产环境，生产环境需要先 build 在 start $ npm run build $ pm2 start npm --name "nuxt-test" -- run start // window 电脑注意：上面命令在 MAC 跟 服务器都可以生效，但是在 window 上如果做测试, // 有部分命令无法生效，我用window 用的少，所以也没去深入折腾，这里给一下建议： // window 电脑本地测试PM2挂开发环境，生产环境目前上面几种启动方式都无法挂载成功，直接上服务器挂就行了，本地只是用于测试，开发环境也不影响测试。 // 只能通过这行命令启动开发环境，生产环境的命令挂起无效，暂时没解决 $ pm2 start ./node_modules/nuxt/bin/nuxt.js
- 然后可以通过
$ pm2 list查看是否挂起成功，这样显示了就是挂起成功了
┌─────┬──────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐ │ id │ name │ namespace │ version │ mode │ pid │ uptime │ ↺ │ status │ cpu │ mem │ user │ watching │ ├─────┼──────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤ │ 0 │ nuxt-test │ default │ N/A │ fork │ 1190 │ 0s │ 0 │ online │ 0% │ 7.8mb │ den… │ disabled │ └─────┴──────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
- 现在就可以通过你这台电脑或者服务器的
ip地址加端口号进行访问了，例如：http://10.0.90.164:3000/。 - 如果需要停掉后台挂起，执行删除命令即可，
id就是$ pm2 list列表中的id值:
// 删除单个挂起进程 $ pm2 delete id // 删除全面挂起进程 $ pm2 delete all 例如： $ pm2 delete 0
- 如果项目修改调整了，上传了新的东西，只需要拉下代码编译后，重启
PM2对应环境进程即可:
开发环境 - 初始化：$ git pull+$ npm install+$ pm2 start npm --name "你的项目名称" -- run dev
生产环境 - 初始化：$ git pull+$ npm install+$ npm run build+$ pm2 start npm --name "你的项目名称" -- run start
注意：$ pm2 start ....命令，每次启动都会在$ pm2 list列表中新增一个管理进程，所以只需要初始化创建了就行了，后面如果不是通过$ pm2 delete id手动删除了，就不需要每次$ pm2 start ....，只需要重启即可：
开发环境 - 后续版本更新：$ git pull+$ npm install+$ pm2 restart id
生产环境 - 后续版本更新：$ git pull+$ npm install+$ npm run build+$ pm2 restart id - 额外说一句：如果
PM2启动项目之后，不知道访问那个地址，那可以先$ pm2 delete id删除进程，执行自带的运行方式$ npm run dev或$ npm run start，需要哪个环境就运行哪个命令，运行之后可以拿到访问地址，拿到之后关掉，在通过PM2运行访问同意一个地址，注意端口号别变化了，如果端口被占用，会分配一个新的端口：
╭──────────────────────────────────────────╮ │ │ │ Nuxt @ v2.14.12 │ │ │ │ ▸ Environment: production │ │ ▸ Rendering: server-side │ │ ▸ Target: server │ │ │ │ Memory usage: 29.4 MB (RSS: 74.6 MB) │ │ │ │ Listening: http://10.0.90.164:3000/ │ │ │ ╰──────────────────────────────────────────╯
- 最终通过
PM2启动挂起之后，现在需要配置一下Nginx，之前启动是Node服务，访问是没问题的，但是现在需要通过Nginx反代理到Node，也就是通过Nginx去访问到Node的资源地址。 - 找到
Nginx的nginx.conf文件，在里面添加一个新的服务，以及一个反代理服务
http { # 新建一个 nuxt server 服务 upstream nuxt { # 这里就是上面配置的 Node ip + 端口号，之前默认是 localhost:3000 server 0.0.0.0:3000; keepalive 64; } server { listen 8083; #服务器端口 server_name www.nuxt.com; #这里对应你服务器的域名 location / { proxy_pass http://nuxt; #这里对应上面 upstream 中新建的服务名 index index.html index.htm; } } }
- 配置好这个之后，通过
$ nginx启动Nginx或者$ nginx -s reload刷新Nginx配置文件生效。 - 配置好之后，启动
Node，启动Nginx，这样就可以直接通过Node的ip + :3000端口直接访问，也可以通过Nginx的ip或域名 + :8083端口访问了，对外当然是走Nginx了，配置一下域名。
- 到这就完事了，其他就是项目内部的细节配置跟使用了，会写到另外的文章里面去！
- Nuxt.js（Vue SSR）项目配置以及开发细节
- 附带 PM2 配置文件的使用，作用就是将生产或开发环境设置到配置文件里面，只需要执行配置文件即可达到效果，当然也可以不用走配置文件，走上面命令行区分生产或开发环境也一样，看自己喜好。
