Nuxt使用“build”和“generate”打包发布【CentOs7】，踩了N个坑得出得经验

电玩女神 2023-06-10 03:29 3阅读 0赞

## generate打包发布 ##

使用命令 npm generate 打包完成后会生成一个 dist 文件夹，拿到这个文件夹后就和vue之前的发布一样了，比较简单这里就不说了。（打包的时候后台需要开着）

## build打包发布 ##

1、使用命令  npm build 打包，会生成一个 .nuxt 文件夹。

2、安装node/npm（这也是蛋疼的一点不能全部靠nginx发布） [Linux下安装Node / npm][Linux_Node _ npm]

3、把下面几个文件在服务器上找个地方放起来  
 .nuxt  /  static /  nuxt.config.js /  package.json  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]  
4、在当前文件夹下面执行  npm i  (但是因为墙的问题，sass可能会下载失败)，可以把npm改成cnpm

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

ln -s /usr/local/node-v12.13.0-linux-x64/bin/cnpm /usr/local/bin

注意上面这个命令，替换成你的node安装路径

5、执行命令  npm start ，成功后你将会看到下面这个界面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]  
6、去浏览器访问你的公网IP就好了

注：如果你访问不了，请考虑下面两个问题  
1、你当前的端口，你在你的服务器上是否开放了（阿里云的安全组）  
2、打开你的  nuxt.config.js做如下修改  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]

**这样发布存在一个问题，就是当你关闭了shell窗口，这个服务就被关闭了**

## 下面来说一下使用pm2 后台发布项目 ##

pm2具体是个啥，我也不想去研究（我真的只是个后端程序员）。在我看来它可以把我的服务在后台运行，不至于说我关闭shell我的服务也跟着关闭了

1、安装 pm2

npm i -g pm2

2、建立软连接，也就是把pm2命令放到 \\usr\\local\\bin 里面去 （你的node安装位置可能和我的不一样，注意看一下地址）

ln -s /usr/local/node/node-v12.13.0-linux-x64/lib/node_modules/pm2/bin/pm2 /usr/local/bin/

3、设备开机自启动

pm2 startup
    pm2 save

4、启用nuxt项目 （这个 my-nuxt ，就是你给这个项目取得一个名字，随意）

pm2 start npm --name "my-nuxt" -- run start

5、附上常用得pm2命令

pm2 list                   # 查看当前正在运行的进程
    pm2 start all              # 启动所有应用
    pm2 restart all            # 重启所有应用
    pm2 stop all               # 停止所有的应用程序
    pm2 delete all             # 关闭并删除所有应用
    pm2 logs                   # 控制台显示所有日志 
    pm2 start 0                # 启动 id为 0的指定应用程序
    pm2 restart 0              # 重启 id为 0的指定应用程序
    pm2 stop 0                 # 停止 id为 0的指定应用程序
    pm2 delete 0               # 删除 id为 0的指定应用程序 
    pm2 logs 0                 # 控制台显示编号为0的日志
    pm2 show 0                 # 查看执行编号为0的进程
    pm2 monit jsyfShopNuxt     # 监控名称为jsyfShopNuxt的进程

### 下面是使用域名访问 ###

**1、域名解析到服务器** [https://blog.csdn.net/Tomwildboar/article/details/80341510][https_blog.csdn.net_Tomwildboar_article_details_80341510]  
  
  
**2、安装nginx** [https://blog.csdn.net/Tomwildboar/article/details/84074095][https_blog.csdn.net_Tomwildboar_article_details_84074095]

#### 3、nginx配置 ####

[nginx配置两个443端口访问，并使80端口指向443，http跳转https][nginx_443_80_443_http_https]

[Linux_Node _ npm]: https://blog.csdn.net/Tomwildboar/article/details/102733269
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20230531/82c910b833ec4c999abc46f728634c2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: /images/20230531/f7cb25d1826843e1b02679c0f3e5d0e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]: /images/20230531/3e83fab9e4464592bc20fd7a8f1802d2.png
[https_blog.csdn.net_Tomwildboar_article_details_80341510]: https://blog.csdn.net/Tomwildboar/article/details/80341510
[https_blog.csdn.net_Tomwildboar_article_details_84074095]: https://blog.csdn.net/Tomwildboar/article/details/84074095
[nginx_443_80_443_http_https]: https://blog.csdn.net/Tomwildboar/article/details/102841811