打包
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"},
nuxt.config.js
env:{NODE_ENV: process.env.NODE_ENV,API_URL: process.env.API_URL,IMG_URL: process.env.IMG_URL,},
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 instancesscript: './node_modules/nuxt/bin/nuxt.js',args: 'start'}]}
然后运行 pm2 start,项目运行成功!