nuxt项目部署

最新推荐文章于 2025-10-01 22:30:29 发布

原创最新推荐文章于 2025-10-01 22:30:29 发布 · 749 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本教程详细介绍了如何使用cnpm安装依赖，部署Nuxt.js项目并利用pm2进行后台运行。首先，通过npm安装cnpm和pm2，并创建软链接。接着，对Nuxt项目执行`npm run build`，选择关键文件并创建`ecosystem.config.js`配置文件。然后，将项目上传至服务器，运行`npm install`安装node_modules，再用pm2启动服务。最后，通过nginx配置反向代理实现端口转发。

nuxt项目部署

一、前言

本篇教程涉及以下几个部分
- cnpm
  - 下载nuxt的依赖，使用npm的话，如果package.json过大，有时候会出现超时失败的情况
- nuxt
  - Vue项目的ssr框架
- pm2
  - 后台运行的工具。类似nohup。

二、下载

下载依赖

npm install cnpm -g
// 创建软连接
ln -s (npm的绝对路径)  /usr/local/bin/
(示例：ln -s /usr/local/nodejs/bin/npm /usr/local/bin/)

npm install pm2 -g
// 创建软连接
ln -s (npm的绝对路径)  /usr/local/bin/
(示例：ln -s /usr/local/nodejs/bin/pm2 /usr/local/bin/)

三、服务器部署

对nuxt项目运行npm run build
如下，复制红色箭头的几个文件到一个新的文件夹中。

在这里插入图片描述

在新文件夹中创建ecosystem.config.js

module.exports = {
  apps: [
    {
      name: 'xxxxxxxxxxx', // 这个name就是pm2启动时需要的name
      exec_mode: 'cluster',
      instances: '1', // Or a number of instances
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start'
    }
  ]
}

这时候文件夹中有以下文件
- .nuxt
- static
- nuxt.config.js
- package.json
- ecosystem.config.js
上传到服务器，执行cnpm installl，文件夹中会生成node_modules
运行pm2 start
服务运行成功，以后台的方式跑在对应的端口上，后续使用nginx转发端口即可

# nginx 转发
location /{
	proxy_pass  http://localhost:3000/
}