Windows server上用nginx部署vue3项目

Windows server上用nginx部署vue3项目

  • 一、Node中node_modules文件夹及package.json文件的作用说明
  • 二、VUE3项目打包
  • 三、Windows Server上的Nginx部署


一、Node中node_modules文件夹及package.json文件的作用说明

node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹,更多细节请见以下链接:

Node中node_modules文件夹及package.json文件的作用说明

运行npm install命令的时候会发生什么?

VUE3项目的工程目录中,通过以下命令可生成node_modules文件夹。

npm install

下面,我们将从VUE3项目打包和Windows Server上的Nginx部署两个方面描述Windows server上用nginx部署vue3项目的整个过程。

二、VUE3项目打包

VUE3项目的打包命令是:

(1)安装Nodejs。点击 Nodejs可跳转至Nodejs的官方下载地址。

(2)进入VUE3项目的工程目录(如下图所示),同时按住“Shift + 鼠标右键”,在弹出的菜单中选择“在此处打开Powershell窗口”选项。
在这里插入图片描述
如此便进入了Powershell命令行界面,如下图所示。
在这里插入图片描述
我们可以执行以下命令(前端打包命令),对该VUE3项目进行打包

npm run build

这里同样补充了一些npm常用命令:

  1. 前端笔记(2) npm常用命令总结

这时,出现以下错误提示:Vite不是内部或外部命令,也不是可运行的程序
在这里插入图片描述
通过查阅资料,继续执行以下命令:

npm install -g vite

再次执行打包命令,

npm run build

还是报错,错误信息如下图所示。
在这里插入图片描述
(3)通过以下命令来更新packages,

npm i

之后,再用npm run build来打包,显示成功,如下图所示。
在这里插入图片描述

(4)打包完成后,在该工程的目录中会生成一个名为dist的文件夹,里面有形成需要部署的文件。


三、Windows Server上的Nginx部署

点击 Nginx可跳转至Nginx的官方下载地址。

Nginx安装包目录中,可以通过以下命令启动Nginx服务:

start nginx.exe  //启动
nginx.exe -t    //检查配置文件是否有错
nginx.exe -s reload    //更新配置文件
nginx.exe -s stop    //快速关闭nginx,不建议使用
nginx.exe -s quit    //等待工作进程处理完成后关闭

这里,nginx给出以下错误信息:
Windows:nginx: [error] CreateFile() “/logs/nginx.pid“ failed (2: The system)
在这里插入图片描述
经分析,造成上述错误的本质原因是:后台开启了太多nginx进程。因此,通过“Windows任务管理器”,关闭过多的nginx进程就可以解决该问题。

其它错误:
Windows环境搭建nginx出现500的错误

CSDN上一个类似的帖子如下:

Windows:nginx: [error] CreateFile() “/logs/nginx.pid“ failed (2: The system)


​ 【彩蛋来了】

看完作者写的这篇博文,请参见:

  1. windows server 用nginx部署vue3项目

  2. 使用Nginx部署Vue项目全过程及踩坑记录

  3. Nginx 配置详解

  4. Vue3+Vite3多项目Nginx部署

  5. nginx 部署vue 3

  6. Nginx之部署Vue3项目

created in 2023.08.03,updated in 2023.08.03

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

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

相关文章

快速消除视频的原声的技巧分享

网络上下载的视频都会有视频原声或者背景音乐,如果不喜欢并且想更换新的BGM要怎么操作呢?今天小编就来教你如何快速给多个视频更换新的BGM,很简单,只需要将原视频的原声快速消音同时添加新的背景音频就行,一起来看看详…

设计模式行为型——中介者模式

目录 什么是中介者模式 中介者模式的实现 中介者模式角色 中介者模式类图 中介者模式代码实现 中介者模式的特点 优点 缺点 使用场景 注意事项 实际应用 什么是中介者模式 中介者模式(Mediator Pattern)属于行为型模式,是用来降低…

CVE漏洞复现-CVE-2019-5021 镜像漏洞利用

CVE-2019-5021 镜像漏洞利用 随着容器技术的普及,容器镜像也成为软件供应链中非常重要的一个组成的部分。人们像使用 pip 等工具从仓库获取各种编程软件库一样,可以从 Docker Hub 或 第三方仓库拉取镜像,在其基础上进行开发,从而…

网络音频终端音频编码解码终端

网络对讲终端SV-7011V 网络对讲终端SV-7011V,采用了ARM音频DSP架构,集网络对讲、网络广播、监听等功能于一身,内置麦克风、配置line out、line in、Mic in功能输出接口,适用于学校,机场,广场等场所。 产品…

保姆级教程--抢先体验 Microsoft 365 Copilot,微软全家桶Chat GPT

【ChatGPT】前些天发现了一个巨牛的人工智能学习电子书,通俗易懂,风趣幽默,无广告,忍不住分享一下给大家。(点击查看学习资料) 前段时间微软发的Microsoft 365 Copilot 可以说非常火爆了,那么该…

元素2D转3D 椭圆形旋转实现

椭圆旋转功能展示 transform-style: preserve-3d;(主要css代码) gif示例(背景图可插入透明以此实现边框线的旋转) 导致的无法点击遮挡问题可以参考我的另一个文章 穿透属性-----------------------css穿透属性 实时代码展示

决策树的划分依据之:信息增益率

在上面的介绍中,我们有意忽略了"编号"这一列.若把"编号"也作为一个候选划分属性,则根据信息增益公式可计算出它的信息增益为 0.9182,远大于其他候选划分属性。 计算每个属性的信息熵过程中,我们发现,该属性的值为0, 也就…

Redis 双写一致性实践及案例

面试问题: 你只要用缓存,就可能会涉及到redis缓存与数据库双存储双写,你只要是双写,就一定会有数据一致性的问题,那么你如何解决一致性问题?双写一致性,你先动缓存redis还是数据库mysql哪一个&…

解决word打字卡顿问题的方法

❤ 2023.8.5 ❤ 最近整理论文,本来我是wps死忠粉,奈何wps不支持latex公式。。。 无奈用起了word,但是谁想字数稍微多了一点,word就卡得欲仙欲死,打个字过去2s才显示出来,删除的时候都不知道自己删了几个字…

代码随想录算法训练营之JAVA|第二十一天| 77. 组合

今天是第21天刷leetcode,立个flag,打卡60天。 算法挑战链接 77. 组合https://leetcode.cn/problems/combinations/description/ 第一想法 需要从N个数中选取K个数,那么第一想法肯定是k个for循环,每个for循环选取一个数&#x…

尚品汇总结三:商城首页(面试专用)

目录 首页商品分类实现 1、封装数据接口 2、页面静态化: 什么是页面静态化 为什么要使用静态化 首页商品分类实现 前面做了商品详情,我们现在来做首页分类,我先看看京东的首页分类效果,我们如何实现类似效果: 思路…

MongoDB 使用总结

🍓 简介:java系列技术分享(👉持续更新中…🔥) 🍓 初衷:一起学习、一起进步、坚持不懈 🍓 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正🙏 🍓 希望这篇文章对你有所帮助,欢…

【ASP.NET MVC】使用动软(四)(12)

一、筛选器类和Cookie实现路由 需解决的问题: 网站登录往往需要用户名密码验证,为避免重复验证,一般采用Cookie 、Session等技术来保持用户的登录状态: Session是在服务端保存的一个数据结构,用来跟踪用户的状态&…

glide加载content://com.android.contacts图片源码粗略梳理

获取链路是这样的; UriLoader类里定义了协议头: 里面有个内部类StreamFactory: 通过StreamLocalUriFetcher类的loadResource方法获取InputStream然后把流转换成为图片; 在这里作个草稿笔记给自己看

数据安全治理实施办法

随着《数据安全法》和《个人信息保护法》陆续出台,各行业数据安全监管力度持续增强,数据安全合规成为企业数据安全治理体系建设的第一推动力。同时,企业普遍面临数据安全治理成本过高,对业务影响过大,实施路径不清晰等…

适配器模式(AdapterPattern)

适配器模式 适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式,它结合了两个独立接口的功能。 优缺点 优点: 单一职责原则。你可以将接口或数据转换代码从程序主要业务逻辑中分…

Docker 安装 MySQL5.6

方法一、docker pull mysql 查找Docker Hub上的mysql镜像 #docker search mysql 这里我们拉取官方的镜像,标签为5.6 #docker pull mysql:5.6 (第一次启动Docker-MySql主要是查看Docker里面MySQL的默认配置,数据位置,日志位置,配…

Arthas GC日志-JVM(十八)

上篇文章说jvm的实际运行情况。 Jvm实际运行情况-JVM(十七) Arthas介绍 因为arthas完全是java代码写的,我们直接用命令启动: Java -jar arthas-boot.jar 启动成功后,选择我们项目的进程。 进入我们可用dashboard…

使用ChatGPT编写技术文档

技术文档对于任何项目都是至关重要的,因为它确保所有利益相关者都在同一层面上,并允许有效的沟通和协作。创建详细而准确的技术文档可能既耗时又具有挑战性,特别是对于那些不熟悉主题或缺乏强大写作技巧的人来说。ChatGPT 是一个强大的人工智…

docker容器学习笔记1

docker容器是干什么用的 docker就是一个轻量级的虚拟机,是一个容器,隔离性好,能够确保环境的统一,有效利用系统资源,轻松迁移和拓展。简单的可以理解为容器就是一个小型功能齐全的虚拟机。 实际上是如何使用的呢&…