当前位置: 首页 > news >正文

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

相关文章:

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后用来存放用包管理工具下载安装的包的…...

计算机视觉与图形学-神经渲染专题-pi-GAN and CIPS-3D

《pi-GAN: Periodic Implicit Generative Adversarial Networks for 3D-Aware Image Synthesis》 摘要 我们见证了3D感知图像合成的快速进展,利用了生成视觉模型和神经渲染的最新进展。然而,现有的方法在两方面存在不足:首先,它们…...

【FAQ】EasyGBS平台通道显示在线,视频无法播放并报错400的排查

EasyGBS是基于国标GB28181协议的视频云服务平台,它可以支持国标协议的设备接入,在视频能力上能实现直播、录像存储、检索与回放、云台控制、告警上报、语音对讲、平台级联等功能,既能作为业务平台使用,也能作为能力层平台调用。 我…...

G1和CMS

G1垃圾回收器要点: 1.什么是G1垃圾回收器: G1是一款专门针对于拥有多核处理器和大内存的机器的收集器,在满足了GC响应时间的延迟可控的情况下,也会尽可能提高的程序的吞吐量 2.G1垃圾回收器的优点: ①与CMS收集器一…...

详解Linux中的socket函数

2023年8月3日&#xff0c;周四下午 目录 函数原型参数domain参数type参数protocol举例说明参数type和参数protocol之间的关系 函数原型 #include <sys/socket.h>int socket(int domain, int type, int protocol);参数domain domain是“域”的意思&#xff0c;其值为AF…...

React Antd 实现表格合计功能

思路&#xff1a;首先拿到 表格数组对象&#xff0c;然后写一个工具类&#xff0c;然后向数组对象最后插入一条数据&#xff0c;这条数据的字段时根据表格数组里合计算出来的。 代码如下&#xff0c;需根据各自业务稍作改动&#xff1a; <Table dataSource{tableData}column…...

尝试一下Guava带返回值的多线程处理类ListenableFuture

文章目录 ListenableFuture&#xff0c;带返回值的Guava多线程处理工具类举个例子扩展阅读 最近在学习&#xff0c;Java实现异步编程的8种方式这篇博客的时候&#xff0c;没有找到比较好的一个学习demo&#xff0c;故在此整理一下。 ListenableFuture&#xff0c;带返回值的Gua…...

微信小程序真机调试报ERR_CERT_AUTHORITY_INVALID

微信小程序真机调试报ERR_CERT_AUTHORITY_INVALID 问题解决方法 问题 微信开发者工具中调试微信小程序&#xff0c;在开发工具里面调试没问题&#xff0c;但是真机调试的时候报ERR_CERT_AUTHORITY_INVALID错误 解决方法 到这个站点检查域名的Https证书的安全性 : 传送门(注:…...

JCommander + AutoService打造带子命令的Java命令行应用

文章目录 需求Java命令行工具库依赖库定义各个子命令主类CLI测试一下参考文档 需求 最近想将自己的一个Java应用包装成命令行工具&#xff0c;看了几个库&#xff0c;最后选取了JCommander&#xff0c;结合AutoService库&#xff0c;实现了带子命令的工具&#xff0c;方便扩展…...

pycharm运行pytest无法实时输出信息

需要去掉控制台输出。根据查询相关信息显示pycharm运行pytest无法实时输出信息&#xff0c;需要去掉pycharm里面的运行模式&#xff0c;点击减号&#xff0c;再点击加号&#xff0c;添加python执行文件即可实时输出信息。 问题描述&#xff1a; 使用pycharm运行代码时&#x…...

Mac 卸载 IntelliJ IDEA 方法

Mac 系统下 IDEA 没有一键卸载程序&#xff0c;也没有完全卸载的插件&#xff0c;若要彻底删除&#xff0c;除了在应用&#xff08;Application&#xff09;里删除 IDEA 到垃圾桶外&#xff0c;还需要在终端&#xff08;Terminal&#xff09;执行删除相应的文件及文件夹。 1 分…...

数据安全能力框架模型-详细解读(三)

数据安全能力框架内涵 “奇安信数据安全能力框架”体现了数据安全治理从组织机构安全治理&#xff0c;到数字化环境具体管控、分析能力分层逐步落实的工程方法。 它以企业数据安全的战略目标和风险容忍度为输入&#xff0c;明确数据安全治理的组织&#xff1b;以合规与治理需…...

vscode启动leiningen项目

要在 VS Code 中启动 Leiningen 项目&#xff0c;你可以按照以下步骤进行操作&#xff1a; 确保已经安装了 Leiningen。你可以在终端中输入 lein version 来检查是否已成功安装。 在 VS Code 中安装 Leiningen 扩展。打开 VS Code&#xff0c;点击左侧的扩展图标&#xff08;四…...

Qt事件的传递顺序

事件的传递顺序 事件的传递顺序是这样的&#xff1a;先是事件过滤器&#xff0c;然后是该部件的event()函数&#xff0c;最后是该部件的事件处理函数。这里还要注意&#xff0c;event()函数和事件处理函数&#xff0c;是在该部件内进行重新定义的&#xff0c;而事件过滤器却是…...

基于facenet+faiss开发构建人脸识别系统

facenet是一款非常经典的神经网络模型&#xff0c;它可以直接学习从人脸图像到欧几里德空间的映射(直接将人脸映射到欧几里得空间)。在欧几里德空间中&#xff0c;距离直接对应于人脸相似性的度量。一旦这个空间产生&#xff0c;使用标准技术&#xff0c;将FaceNet嵌入作为特征…...

数据分析的心脏:获取数据的好工具

打开网站&#xff1a;Scrape and Monitor Data from Any Website with No Code 新建机器人&#xff1a; 选择类型&#xff1a; 填写目标网站网址&#xff1a; 输入网址&#xff1a;https://cn.wsj.com/zh-hans/news/technology 第一次录制需要安装chrome插件&#xff1a; 并设置…...

【万字长文】SpringBoot整合Atomikos实现多数据源分布式事务(提供Gitee源码)

前言&#xff1a;在最近的实际开发的过程中&#xff0c;遇到了在多数据源的情况下要保证原子性的问题&#xff0c;这个问题当时遇到了也是思考了一段时间&#xff0c;后来通过搜集大量资料与学习&#xff0c;最后是采用了分布式事务来解决这个问题&#xff0c;在讲解之前&#…...

js中什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?

目录 目录 目录 参考资料 必看强烈建议十分钟看完视频 &#xff0c;即可学会 必看参考详解宏任务微任务 参考资料 1 宏任务与微任务_哔哩哔哩_bilibili 什么是宏任务、微任务&#xff1f;宏任务、微任务有哪些&#xff1f;又是怎么执行的&#xff1f;_什么是宏任务和微任…...

Word中如何断开表格中线段

Word中如何断开表格中线段_word表格断线怎么弄_仰望星空_LiDAR的博客-CSDN博客有时候为了美观&#xff0c;需要实现如下的效果&#xff0c;即第2条线段被断开成3段步骤如下&#xff1a;选中需要断开的格网&#xff0c;如下&#xff0c;再选择段落、针对下框标即可。_word表格断…...

大数据指标体系-笔记

指标体系 1 总体流程图 1.1 2 模型‘ 2.1 OSM OSM(Object,Strategy,Measure) 「业务度量」涉及到以下两个概念:一个是KPI ,用来直 接衡量策略的有效性;一个是Target,是预先给出的值,用来判断是否达到预期 2.2 UJM User, Journey, Map 2.3 AARRR-海盗 AARRR(Acquisitio…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

DBLP数据库是什么?

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...