vue的ssr方案-nuxtjs应用部署到linux服务器

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。

1、准备

服务器中需要安装nodejs环境

下载安装包到指定目录,我的存放目录是 /usr/local/

执行命令

tar -xvf   node-v8.9.3-linux-x64.tar.xz   //解压
mv node-v8.9.3-linux-x64  nodejs       //改名

添加node npm到全局

ln -s /usr/local/nodejs/bin/node /usr/local/bin/
ln -s /app/local/nodejs/bin/npm /usr/local/bin/

为了某些情况顺利点建议安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

同样添加到全局

ln -s /usr/local/nodejs/bin/cnpm /usr/local/bin/

安装pm2,便于进行进程管理

npm install pm2 -g //安装pm2

添加到全局

ln -s /usr/local/nodejs/bin/pm2 /usr/local/bin/

2、过程

我将我本地的项目文件传输到/usr/local/nuxt/nuxtDemo目录 注意不用传输node_modules .nuxt dist等一些开发环境的文件

cd到/usr/local/nuxt/nuxtDemo目录执行

cnpm install
npm run build
npm run start

可以使用pm2进行进程管理

pm2 start ./node_modules/nuxt/bin/nuxt

会默认启动一个服务进程，端口号是3000

测试

curl http://localhost:3000  
//出来一段你的应用html说明部署是没问题的

3、还没有完事，需要给外网访问你的应用，用nginx进行代理

upstream nuxt {
        server 127.0.0.1:3000;
}

server{
        listen 8082;
        server_name 192.168.3.205;
        location / {
             proxy_set_header Host  $http_host;
             proxy_set_header X-Real-IP  $remote_addr;
             proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
             proxy_set_header X-Nginx-proxy true;
             proxy_pass http://nuxt;
             proxy_redirect off;
        }
}

4、我们在外网访问应用

http://192.168.3.205:8082

到此为止，vue2.0的ssr应用服务已经部署完毕

5、不需要了可以结束进程

mp2 stop nuxt

6、更多pm2命令

//安装
npm install pm2 -g //安装pm2
pm2 update // 更新pm2
pm2 uninstall pm2 //移除pm2

//开启关闭
pm2 start nuxt //启动server.js进程
pm2 start nuxt -i 4 //启动4个server.js进程
pm2 restart nuxt //重启server.js进程
pm2 stop all // 停止所有进程
pm2 stop nuxt //停止server.js进程
pm2 stop 0 //停止编号为0的进程

//查看

pm2 list

//监控

pm2 monit

//查看日志
pm2 logs

7、vue采用服务器渲染有几点好处

vue官网中有做描述

8、更详细的可以到博客地址 jtanx博客查看