Nuxt提供了两种部署方式：服务器端渲染应用部署和静态部署。
静态部署
修改nuxt.config.js部署目标方式
target: 'static',
执行生成一个dist目录
npm run generate
dist目录里就是一些静态文件，把这个dist目录放到服务器上，配置一个nginx站点指向你这个dist目录就可以访问。
静态部署但是如果后台修改数据，前端还是显示之前打包的数据
服务器端渲染应用部署
修改nuxt.config.js部署目标方式
target: 'server',
在本地执行
npm run build
将package.json 、nuxt.config.js 、static 、.nuxt 4个文件传到node服务器文件夹下
进入node服务器文件下执行
npm install
npm run start
根据控制台提示Listening: http://localhost:3001/
pm2守护进程(服务器开机自启动)
npm i pm2 -g
pm2 start npm --name "你的项目名称" -- run start //你的项目名称是package里的项目名称。
pm2 list查看是否运行成功\
pm2常规命令
pm2 delete id //删除指定id的pm2进程
pm2 delete all //删除全部进程
pm2 list //查看所有pm2进程
pm2 stop id /停止指定id的pm2进程
pm2 stop all ////停止全部进程
pm2 restart [name] //重启进程
修改nginx.conf配置反向代理
# 新建一个 nuxt server 服务
http{
upstream nodenuxt {
server 127.0.0.1:3001;
keepalive 64;
}
server {
listen 8000;
server_name www.xxxx.com;
location / {
proxy_pass http://nodenuxt;
}
}
}
访问 www.xxxx.com:8000 域名代理到http://localhost:3001/ 的node服务
后台数据更新,页面可以刷新更新到最新数据
小结
1、后台数据更新频繁的话，建议用服务端部署。
2、后台数据不经常更新的话，可以考虑静态部署。
补充
线上环境的话，可以配置线上的域名和端口，在package.json文件里写就可以，写法如下：
"config":{
"nuxt":{
"host":"xxx.com", //线上域名
"port":"80" //线上端口
}
}
在nuxt.config.js文件里配置也行，写法如下：
server: {
port: 3001, // 线上端口
host: 'xxx.com', // 线上域名
}
然后在服务器上用pm2开启一个守护进程就可以了。命令如下：
pm2 start npm --name "mynuxt" -- run start //mynuxt是package里的项目名称。
服务器端部署不用部署nginx。
