当前位置: 首页 > 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…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...