Nuxt.js服务器端渲染如何部署？_nuxt设置服务器端

打包

Nuxt.js有两种不同的打包方式：

①静态部署

跟Vue的部署是一样的，运行 npm run generate可以打包成dist文件夹，将静态文件直接放到服务器上对应位置即可。

这种模式打包的时候会生成对应的html文件，如果项目中数据涉及到后台接口，那么在打包的时候所有的数据都会注定，后续若接口数据发生改变，页面也不会再变了，适合一些静态站点的项目。

②服务器端渲染部署

运行 npm run build , .nuxt文件夹会有对应文件的生成，将.nuxt、static、package.json、 nuxt.config.js等文件放入到服务器对应的目录里即可。

注意：如果是有别的资源文件夹，那必须将另外的资源文件夹，如assets同时复制，不然可能会出现找不到资源文件的情况。

部署可能会出现的问题：

1.提示NODE_ENV未定义

cross-env的使用方式出了问题，定义了env文件去处理环境变量，系统无法识别到对应的变量参数。

解决方法： 在package.json将环境变量配置好后在config文件去定义。

"scripts": {
    "dev": "cross-env NODE_ENV=dev API_URL='**' IMG_URL='**' nuxt --open",
    "build": "cross-env NODE_ENV=pro API_URL='**'  IMG_URL='**' nuxt build",
    "start": "cross-env NODE_ENV=pro API_URL='**'  IMG_URL='**' nuxt start",
    "generate": "nuxt generate"
  },
1
2
3
4
5
6

nuxt.config.js

env:{
    NODE_ENV: process.env.NODE_ENV,
    API_URL: process.env.API_URL,
    IMG_URL: process.env.IMG_URL,
  },
1
2
3
4
5

2.提示某些资源文件未被找到

解决方法：将对应资源文件跟打包好的文件一起移动到服务器对应位置。

以上步骤都没有问题的情况下，在对应的服务器文件夹下运行

npm install 和 npm start

项目能够正常在设置好的端口下运行则第一大步成功。

使用pm2进程管理，让项目持续运行

PM2 是具有内置负载均衡器的 Node.js 应用程序的生产流程管理器。它允许您使应用程序永远保持活动状态，在不停机的情况下重新加载它们，并促进常见的系统管理任务

在服务器上用npm或其他包管理工具安装pm2

npm install -g pm2

然后启动服务：

pm2 --name=你的服务名 start npm – run start

这一步有可能会失败，运行服务失败，找不到对应运行的文件。此时可以执行以下操作：

在根目录下创建一个js文件，内容如下：

module.exports = {
    apps: [
      {
        name: 'new_nuxt',  // 须与package.json中的name值一直
        exec_mode: 'cluster',
        instances: '1', // Or a number of instances
        script: './node_modules/nuxt/bin/nuxt.js',
        args: 'start'
      }
    ]
  }
1
2
3
4
5
6
7
8
9
10
11

然后运行 pm2 start，项目运行成功！