使用nginx在windows服务器上部署vue项目

最新推荐文章于 2025-03-04 11:00:56 发布
最新推荐文章于 2025-03-04 11:00:56 发布
阅读量2.7k 收藏 2
点赞数 1
分类专栏： 个人总结 文章标签： nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52526235/article/details/123311196
版权

一、下载nginx

Nginx下载官方网址：http://nginx.org/en/download.html
在这里插入图片描述
选择稳定版本，下载zip文件，经过解压
在这里插入图片描述
就可以得到以上的文件夹，可以直接点击nginx.exe进行运行，也可以
在这里插入图片描述
通过命令行运行

start nginx

然后就可以访问
在这里插入图片描述

二、配置dist

在这里插入图片描述
把前端打包的dist文件，放到html里边在这里插入图片描述
然后打开nginx.conf文件，进行修改配置
在这里插入图片描述
然后就可以访问了

注意

1、nginx的文件夹最好不要以n开头不然/n会被转译
2、打开nginx进程过多，可以用一下命令全部关闭
在这里插入图片描述

taskkill /f /t /im nginx.exe
在nginx上部署vue项目(history模式)的方法
08-28
总结来说，部署Vue项目并启用`history`模式需要在服务器端进行适当的配置，以确保所有路由请求都能正确地导向Vue应用的入口文件。无论是Apache还是Nginx，都需要将未找到的请求重定向至`index.html`，以便Vue应用的...
nginx下部署vue项目的方法步骤
09-29
在部署Vue项目到Nginx服务器时，首先需要了解Nginx是一个高性能的HTTP和反向代理服务器，其通过将静态内容服务、负载均衡、缓存等技术相结合，提供了一种高效、可靠和灵活的方式，用于在生产环境中托管Web应用。...
Windows服务器，通过Nginx部署VUE+Django前后端分离项目
weixin_41458599的博客
12-08 847
在Windows 服务器上，通过Nginx部署 vue+Django前后端分离项目，同时解决Django部署后admin静态文件样式丢失问题
Windows系统使用Nginx部署Vue
2301_78834737的博客
07-12 2812
Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。,出现以下界面说明启动成功(由于笔者电脑80端口被占用，所以更改为8080，nginx默认为80端口)。工具，将Nginx转换为Windows服务，Windows系统重启后会自动启动Nginx服务。​ 配置文件如下：主要包含日志位置、启动和关闭，目录根据自己安装位置调整（不要有中文）。用cmd命令窗口，cd 到nginx解压目录，，根据系统版本下载对应工具。
【Nginx】在Windows服务器上用Nginx部署Vue前端全流程（附避坑指南）
VT_馒头的博客
02-28 2205
Windows Nginx配置Vue、Vue项目打包部署、前端服务器部署教程：前端开发者 | 运维新手 | 需要快速上线项目者。
Windows使用Nginx部署Vue项目
u012887668的博客
04-13 3930
在vue.config.js文件配置outputDir，为打包项目的文件夹名，自己命名参考vue项目下的package.json文件里scripts配置的prod命令，执行打包命令打包完成后的文件夹内文件如下图所示。
Windows nginx 部署 vue项目
yangqii的博客
05-27 1842
一、vue项目打包 正常vue_cli脚手架打包命令： npm run build vue-element-admin 项目 打包命令： npm run build:prod [ 两句命令区别大概是后台框架需要指定打包的环境（test,dev,prod），具体的区别还不太清楚， 参考文章：https://blog.csdn.net/crazyzomble/article/details/95614466 ] 可能需要修改的配置参数： 1. env.production 文件中 VUE_APP_.
Windows 使用 Nginx 部署 vue 项目
Wxin0721的博客
05-07 6131
1.安装Nginx Windows 安装 Nginx 2.将打包好的vue项目，也就是 dist 文件夹内的内容 粘贴到 nginx 文件夹下的 html 文件夹内 3.修改 nginx conf 文件夹 中的 nginx.conf 将 root 修改为 html 的路径 4.启动访问即可 5.解决路由中使用 history 导致 404 的问题，将以下代码放到 location 中 index 下面即可 #解决404 try_files $uri $uri/ /i...
Nginx 部署vue项目 （Windows版）
weixin_49107940的博客
08-16 3147
项目在本地正常运行后再打包部署。
vue项目部署到nginx/tomcat服务器的实现
10-16
部署Vue项目到Nginx/Tomcat涉及将构建生成的静态资源文件托管在服务器上，并确保应用能够正确地处理前端路由。 在Vue项目中，默认情况下，路由是通过hash模式来实现的，即URL中会有'#'符号。但为了美观，我们通常...
web服务器nginx+部署前端vue项目
03-22
### Nginx 与前端 Vue 项目的部署 ...对于前端 Vue 项目来说，通过简单的几步配置即可将其部署到 Nginx 上，从而充分利用 Nginx 的高性能和稳定性。无论是对于个人开发者还是企业级项目，Nginx 都是值得考虑的选择。
【Nginx 】Nginx 部署前端 vue 项目
m0_74825746的博客
01-17 1448
在两种系统中，安装Nginx的过程都相对简单，主要区别在于使用的软件包管理器不同。这包括访问Vue应用的主页，以及尝试访问应用中的各个路由，确保它们都能正确加载。文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。在CentOS或RHEL系统上安装Nginx的过程与Ubuntu/Debian略有不同，主要体现在软件包管理器的使用上。在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。
windows使用nginx部署vue项目，另加小皮面板Apache部署
qq_45757927的博客
02-29 1623
启动后在浏览器输入localhost:80，跳转到80是因为我们在nginx.conf文件里配置的是80端口。打开cmd命令行进入该文件夹，输入npm run build，打包完成后会生成一个dist文件夹。把vue项目dist文件夹，复制到nginx文件夹html内，并改名为你自定义的名字。保存后，打开cmd命令行，cd到nginx文件夹下，输入start nginx启动。官网：http://nginx.org/en/download.html。可以看到我们正常跳转到了页面。❗依照下图进行编辑配置。
Windows环境， nginx 部署 vue
GY的的专栏
06-01 2140
首先需要在 Windows 系统上安装 Nginx，可以从官网下载 Windows 版本的 Nginx，下载地址为：http://nginx.org/en/download.html。注意：如果启动 Nginx 后访问出现 403 错误，需要给 Nginx 的安装目录和 Vue.js 应用的打包后的静态文件所在目录添加读取权限。其中，`C:/path/to/vue/app/dist` 是 Vue.js 应用的打包后的静态文件所在目录。下载完成后，解压缩到任意目录，例如：C:\nginx。
Windows中安装Nginx、部署vue项目
liuxiongya的博客
01-25 1878
其实我们平时工作中会遇到很多类似的场景，可能一个月或者一年前做的事情，过一段时间你又要做一遍，而很多这种配置的工作都是比较繁琐，步骤比较多的，这时候去网上找资料显不是一个明智的选择，因为网上的资料良莠不齐，可能你花了大量的时间做了无用功。那么如果我们养成良好的习惯，把自己遇到的问题，踩过的坑都记录下来，一方面是方便自己以后遇到类似的问题可以快速查看，另一方面可以帮助其他的小伙伴解决问题，何乐而不不为呢？另外，我建议，我们写教程的时候可以图文搭配，落实到最小的粒度去讲解，本着一颗求学的心态去写文章。
在 Windows系统中安装、卸载Nginx，及部署Vue项目在Nginx中
m0_50298323的博客
04-06 5360
在 Windows系统中安装、卸载Nginx，及部署Vue项目在Nginx中
在windows中安装nginx，和部署vue项目文件
m0_69874989的博客
04-11 378
安装和配置nginx，简单部署vue项目
windows平台上通过Nginx部署Vue项目
Debug_runner的博客
09-15 548
在windows平台上通过Nginx部署Vue项目 公司项目使用 ruoyi_cloud 微服务快速平台开发，前端用的是 ant design vue 今天临时需要部署前端，同事忙不过来，我就操刀上了；做为一个以前仅仅在 Linux 上简单玩过 Nginx 的小白，刚开始还是比较懵逼的，公司这次部署是在windows平台上，网上一顿查资料，也算是完成任务了，其实挺简单的；遂简单记录下，以备以后查阅，也希望能帮到遇到同样问题的小伙伴 首先去 Nginx 官网下载 Nginx软件包，最好选择 Stable 稳
windows服务器nginx部署vue项目
最新发布
生命不止，学习不止
03-04 147
windows服务器如何通过nginx部署vue项目
Vue项目在Nginx服务器上部署SSL配置指南
资源摘要信息:"在本资源中，我们将探讨如何将Vue项目部署到Nginx服务器，并对Nginx进行SSL配置以支持HTTPS。首先，需要了解Vue项目的构建过程，即如何使用Vue CLI的build命令对Vue项目进行打包，生成生产环境下的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值