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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【项目 计网3】Socket介绍 4.9字节序 4.10字节序转换函数

文章目录 4.8 Socket介绍4.9字节序简介字节序举例 4.10字节序转换函数 4.8 Socket介绍 所谓 socket(套接字),就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象。一个套接字就是网络上进程通信的一端,提供了应用层进…

VUE之JWT前后端分离认证,学生管理系统

参考资料: SpringBoot搭建教程 SpringCloud搭建教程 JWT视频教程 JWT官网 Vue视频教程 JWT视频参考资料、VUE视频资料,及前后端demo 特别有参考价值的JWT博客1 特别有参考价值的JWT博客2 cookie、localstorage和sessionStorage的区别1 cookie、localstorage和sessi…

总结七大排序!

排序总览 外部排序:依赖硬盘(外部存储器)进行的排序。对于数据集合的要求特别高,只能在特定场合下使用(比如一个省的高考成绩排序)。包括桶排序,基数排序,计数排序,都是o…

【数据库】将excel数据导入mysql数据库

环境:Windows10 mysql8以上 将你要导入的excel表另存为txt格式 打开txt格式文件,删除表头行并另存为并更改编码方式(由于与数据库的编码不同,会导致导入报错) 通过命令行登录数据库 winr cmd进入 进入装mysql的目录位…

软件设计原则

文章目录 一、软件设计原则1. 开闭原则2. 里氏代换原则3. 依赖倒转原则4. 接口隔离原则5. 迪米特法则6. 合成复用原则 一、软件设计原则 在软件开发中,为了提高软件系统的可维护性和可复用性,增加软件的可扩展性和灵活性,程序员要尽量根据软件…

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

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

Last-Mile Embodied Visual Navigation 论文阅读

论文阅读 题目:Last-Mile Embodied Visual Navigation 作者:JustinWasserman, Karmesh Yadav 来源:CoRL 时间:2023 代码地址:https://jbwasse2.github.io/portfolio/SLING Abstract 现实的长期任务(例如…

antv/l7地图,鼠标滚动,页面正常滑动-- 我们忽略的deltaY

背景 在官网项目中,需要使用一个地图,展示产品的分布区域及数量。希望的交互是,鼠标放上标点,tooltip展示地点和数量等信息。鼠标滚动,则页面随着滚动。但是鼠标事件是被地图代理了的,鼠标滚动意味着地图的…

4,链表【p5】

链表 4.1哈希表简介4.2有序表简介4.3链表4.3.1例1-反转单向和双向链表4.3.2例2-打印两个有序链表的公共部分4.3.3面试时链表解题的方法论4.3.4例3-判断一个链表是否为回文结构4.3.4.1快慢指针 4.3.5例4-将单向链表按某值划分成左边小、中间相等、右边大的形式4.3.6例5-复制好友…

RabbitMQ - 简单案例

目录 0.引用 1.Hello world 2.轮训分发消息 2.1 抽取工具类 2.2 启动两个工作线程接受消息 2.4 结果展示 3.消息应答 3.1 自动应答 3.2 手动消息应答的方法 3.3 消息自动重新入队 3.4 消息手动应答代码 4.RabbitMQ 持久化 4.1 队列如何实现持久化 4.2 消息实现持久化 5.不…

DBSCAN聚类

一、概述 DBSCAN(Density-Based Spatial Clustering of Applications with Noise)是一种基于密度的聚类算法,簇集的划定完全由样本的聚集程度决定。聚集程度不足以构成簇落的那些样本视为噪声点,因此DBSCAN聚类的方式也可以用于异常点的检测。 二、算法…

【音视频SDK测评】线上K歌软件开发技术选型

摘要 在线K歌软件的开发有许多技术难点,需考虑到音频录制和处理、实时音频传输和同步、音频压缩和解压缩、设备兼容性问题等技术难点外,此外,开发者还应关注音乐版权问题,确保开发的应用合规合法。 前言 前面写了几期关于直播 …

SpringBoot+SSM实战<一>:打造高效便捷的企业级Java外卖订购系统

文章目录 项目简介项目架构功能模块管理端用户端 技术选型用户层网关层应用层数据层工具 项目优缺点结语 黑马程序员最新Java项目实战《苍穹外卖》:让你轻松掌握SpringBootSSM的企业级开发技巧项目简介 《苍穹外卖》是一款为餐饮企业(餐厅、饭店&#x…

leetcode 1290.二进制链表转整数

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;二进制链表转整数 ps&#xff1a; 1 0 1 (0 << 1) 1 0 1 1 (1 << 1) 0 2 0 2 (2 << 1) 1 4 1 5代码&#xff1a; int getDecimalValue(struct ListNode* head) {int ans 0;while(head !…

滇医通微信小程序分析笔记

注意 本文章仅供学习交流使用&#xff0c;如果你是铁粉你就会知道博主之前发布过一篇相关的文章&#xff0c;但是由于代码涉及到法律相关所以就隐藏了&#xff0c;两年的时间过去了&#xff0c;因为女朋友已经早早安排上了&#xff0c;所以就搁置了&#xff0c;本次不做代码分…

视频监控汇聚平台EasyCVR视频分享页面WebRTC流地址播放不了是什么原因?

开源EasyDarwin视频监控TSINGSEE青犀视频平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多…

微信小程序nodejs+vue+uniapp个人家庭理财系统--论文

随着Internet的发展&#xff0c;人们的日常生活已经离不开网络。未来人们的生活与工作将变得越来越数字化&#xff0c;网络化和电子化。网上管理&#xff0c;它将是直接管理家庭理财系统app的最新形式。本论文是以构建家庭理财系统app为目标&#xff0c;使用nodejs技术制作&…

macOS下Django环境搭建

1. macOS升级pip /Library/Developer/CommandLineTools/usr/bin/python3 -m pip install --upgrade pip 2. 卸载Python3.9.5版本 $ sudo rm -rf /usr/local/bin/python3 $ sudo rm -rf /usr/local/bin/pip3 $ sudo rm -rf /Library/Frameworks/Python.framework 3. 安装P…

人工智能大模型中token的理解

“token”是当前语言类模型的数据单位。当前的自回归语言模型是根据 token 来作为单位进行数据处理和计算&#xff0c;分词&#xff08;tokenization&#xff09;就是将句子、段落、文章这类型的长文本分解为以 token 为单位的数据结构&#xff0c;把文本分词后每个词表示成向量…

SpringBoot + ajax 实现分页和增删查改

0目录 1.SpringBoot 2.SpringBoot分页&#xff1b;增删改查 1.SpringBoot分页 创建数据库和表 创建SpringBoot工程&#xff0c;引入springboot下的分页依赖 配置application.yml 实体类 Mapper接口 Mapper.xml Service接口 Service实现类 控制层 测试 加…