Linux下如何部署Nuxt项目(二)

Linux下如何部署Nuxt项目(一)_小鸟哗啦啦的博客-CSDN博客,书接上回,以实际场景开始。

请认真看完这篇文章,还不会部署Nuxt,我直接拿弹弓打你们家玻璃!

一、nuxt的配置检查

服务端渲染的应用,应该是先编译构建,然后再去启动nuxt服务。如果你不build,而是直接运行 npm run dev 这种,没有经过webpack压缩,请求资源会相当的饿耗时。也就是上一篇文章中说的根本不是部署!!!

1.package.json中描述:

nuxt: 启动热更新的web服务器,当然指的是开发模式

nuxt build: webpack进行打包

nuxt start: 这才是生产部署的指令,当然也是启动一个web服务器

{"name": "my-nuxt-web","version": "1.0.0","private": true,"scripts": {"web": "nuxt","build": "nuxt build","start": "nuxt start","generate": "nuxt generate"},"dependencies": {"@nuxt/http": "^0.6.4","bootstrap": "^4.6.0","bootstrap-vue": "^2.21.2","compression-webpack-plugin": "6.1.1","core-js": "^3.15.1","element-ui": "^2.15.13","nuxt": "^2.15.7"},"devDependencies": {"@nuxtjs/style-resources": "^1.2.1","less": "^4.1.2","less-loader": "^7.3.0"}
}
2.nuxt.config.js 

也是非常重要的配置文件,这里只说重要的几个属性:

// 生产环境 必须是 service
target: "service", // server 的配置
server: {port: "3001",host: "0.0.0.0" // 必须是 0.0.0.0
},

target:开发环境为 static,生产打包时必须是 service,否则你运行 npm run start 就会报错:

Error: Output directory `dist\` does not exist, please use `nuxt generate` before `nuxt start` for static target.

不要怀疑是路径问题,就是target配置错了。官网的配置介绍:Nuxt 2 - Commands and Deployment

server: host的配置必须为本机,否则你会发现部署后访问不到资源。 

二、nuxt的本地打包检查

你可能会觉得有点多余,但本地先操作会使一些问题变得好定位,比如说本地没有问题,部署发现访问不到,就可以定位到问题是服务器的端口未开放 或者 防火墙未关闭。

1. 直接运行 npm run build  --- 没有错误

2. 直接运行 npm run start ---没有错误

恭喜,完成部署前的一切检查!

三、nuxt的线上发布

两种方式:

1.本地工程全量上传至服务器,甚至可以本地打包,node_modules也上传,直接跳转到第3步

2.选择必要的文件,上传至服务器 比如说 Nuxt 文件夹

.nuxt // 文件夹 (build之后,内部会有个dist目录)
static // 静态不编译的文件夹
package.json // 配置文件
nuxt.config.js // 配置文件

 终端进入Nuxt文件夹中:这里推荐yarn,npm坑了我一把

yarn install

然后打包

npm run build

3.启动服务 name就是package.json中的name

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

查看进程 pm2 list,行了,自己玩去吧

4.确保服务器重启时能自动拉起你的服务 pm2 save 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/26580.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【从零开始学习JAVA | 第二十九篇】Stream流

目录 前言: Stram流: 设计目标: 使用步骤: 1.先得到一条Stream流,并把数据放上去。 2.利用Stream流中的各种API进行操作。 使用Stream流的注意事项: 总结: 前言: 本文我们将学习Stream流…

vue3 前端编码规范

prettier 配置 1. vscode 安装prettier 的 插件 2. 新建 .prettierrc 文件 {"semi": false, // 不尾随分号"singleQuote": true, // 使用单引号"trailingComma": "none" // 多行逗号分隔的语法,最后一行不加逗号 }eslin…

《远见》阅读笔记

不同的环境,不同的职业,职业生涯的建议并没有什么不同 找到热爱的工作,建立热爱的生活 如何思考职业远景 如何分配时间 如何扩张人脉 职业生涯决策框架 三个部分 职场思维、框架、工具实用性建议和案例现实生活为基础,平衡职…

Animboat Application Framework

SpringBoot的服务将部署在云端 管理云端数据和处理分布式的业务请求 本地基础服务将作为云端和终端中间媒介, 与局域网内其它dcc 插件或者app运行实例进行通信, 同时本地基础服务将负责本地数据的管理。 每个AppInstance都会有自己的FlaskSvr用于与Loc…

Acrel-1000DP分布式光伏系统在重工企业的应用

安科瑞 崔丽洁 摘 要:分布式光伏发电特指在用户场地附近建设,运行方式以用户侧自发自用、余电上网,且在配电系统平衡调节为特征的光伏发电设施,是一种新型的、具有广阔发展前景的发电和能源综合利用方式,它倡导就近发电…

【云原生】Docker网络Overlay搭建Consul实现跨主机通信

目录 1.overlay网络是什么? 实现overlay环境 1.overlay网络是什么? 在Docker中,Overlay网络是一种容器网络驱动程序,它允许在多个Docker主机上创建一个虚拟网络,使得容器可以通过这个网络相互通信。 Overlay网络使用…

字符串函数及内存函数C语言

字符函数及内存函数 一.字符串函数函数1.strlen函数2.strcpy函数3.strcat函数4.strcmp函数5.strncpy函数6.strncat函数7.strncmp函数8.strstr函数9.strtok函数10.strerror函数 二.内存函数1.memcpy函数2.memmove函数3.memcpy函数4.memset函数 一.字符串函数函数 1.strlen函数 …

【程序员必须掌握哪些算法?】

一个程序员一生中可能会邂逅各种各样的算法,但总有那么几种,是作为一个程序员一定会遇见且大概率需要掌握的算法。今天就来聊聊这些十分重要的“必抓!”算法吧~ 常见算法介绍 本文所介绍的排序算法均以升序为例。 文章目录 常见算法介绍一 …

P106-100组A卡(R5 240)指南

P106-100组A卡(R5 240)指南 不建议小白尝试 不建议小白尝试 不建议小白尝试文章目录 P106-100组A卡(R5 240)指南资料合集硬件软件基础卸载所有原驱动安装驱动修改注册表自动调用——只改一个注册表手动调用——改两个注册表 劝退…

Qt中QMainWindow的相关介绍

目录 菜单栏 工具栏 状态栏: 停靠窗口: QMainWindow 是标准基础窗口中结构最复杂的窗口,其组成如下: 提供了菜单栏 , 工具栏 , 状态栏 , 停靠窗口 菜单栏:只能有一个,位于窗口的最上方 工具栏:可以有多…

攻不下dfs不参加比赛(十四)

标题 为什么练dfs题目为什么练dfs 相信学过数据结构的朋友都知道dfs(深度优先搜索)是里面相当重要的一种搜索算法,可能直接说大家感受不到有条件的大家可以去看看一些算法比赛。这些比赛中每一届或多或少都会牵扯到dfs,可能提到dfs大家都知道但是我们为了避免眼高手低有的东…

软件体系结构-KWIC索引系统

引言 KWIC作为一个早年间在ACM的Paper提出的一个问题,被全世界各个大学的软件设计课程奉为课堂讲义或者作业的经典。(From Wiki,FYI,D. L. Parnas uses a KWIC Index as an example on how to perform modular design in his pap…