100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Nuxt.js服务器端渲染如何部署?

Nuxt.js服务器端渲染如何部署?

时间:2022-12-12 17:47:09

相关推荐

Nuxt.js服务器端渲染如何部署?

打包

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,项目运行成功!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。