Nuxt.js服务端渲染项目在centos7上如何部署

小半 • 2023年2月16日下午1:14 • 微信精选 • 阅读 177

前言

刚有个需求，开发个官网，涉及到SEO，但是vue开发的项目基本上是单页面应用，客户端渲染的，不利于搜索优化。但是有成熟的SSR技术，也就是服务端渲染，本文使用Nuxt.js开发，部署和传统的vue部署略有区别。

这个问题会出现，就是发布了后，服务器上可以访问，对外不能访问，需要对外暴露端口，设置 0.0.0.0 任何域名都可访问。修改package.json文件，添加内容

   //上面的不用动
  ,
  "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "3000"
    }
  }

在项目目录下执行

npm run build

复制文件和目录

.nuxt assets （有的没有这个） static nuxt.config.js package.json在项目部署目录下执行 1：【前提: centos上安装 node】
例如下载到/usr/local/src目录下

wget https://npm.taobao.org/mirrors/node/v14.13.1/node-v14.13.1-linux-x64.tar.xz

解压

# xz格式，先用xz解压
xz -d node-v14.13.1-linux-x64.tar.xz
# 再用tar解压
tar xvf node-v14.13.1-linux-x64.tar

设置环境变量

vim ~/.bashrc

在文件末尾添加内容并保存

export PATH=/usr/local/src/node-v14.13.1-linux-x64/bin:$PATH

使配置生效

source ~/.bashrc

查看安装版本

[root@master site]# node -v
v14.13.1

2：【安装pm2】

npm install -g pm2

pm2想了解更多的话，可以点击此处

2：【下载依赖】

npm install

3：【使用pm2启动项目】
在项目目录下执行

pm2 start npm --name "boshi-web" -- run start

注意：boshi-web是给项目起的名字，命名随意，有空格的话，加双引号就可以了，不要使用单引号。加单引号的话，在使用“pm2 list”进行查看时，会看到项目进程的名字中也会带有单引号，但使用双引号就没问题。

http://服务器ip地址:3000

如:http://192.168.196.111:3000

参考
https://blog.csdn.net/just4you/article/details/109144339

https://blog.csdn.net/just4you/article/details/109149517

https://blog.csdn.net/just4you/article/details/109149382

https://blog.csdn.net/u013904458/article/details/81033

开通了个微信公众号：搜索：怒放de每一天后续可能不定时推送相关文章，期待和大家一起成长！！

在这里插入图片描述

大功告成!!

原文始发于微信公众号（怒放de每一天）：Nuxt.js服务端渲染项目在centos7上如何部署

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/106615.html