windows服务器nginx部署vue项目

于 2025-03-04 11:00:56 发布
阅读量252 收藏
点赞数 1
文章标签： 服务器 nginx vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/x13913359861/article/details/146008786
版权

准备工作：

1.windows服务器

2.下载nginx压缩包并解压

3.防火墙端口开放，如果是云服务器一般可以直接设置安全组开放指定端口

重点：

vue打包的dist文件放在哪里？

演示地址：C:\Soft\nginx-1.26.2\html\mn\dist

dist路径关系到nginx.config的配置

nginx.config的dist文件路径配置

当前配置正常启动，我们访问vue项目的路径就是http://服务器地址:81，当前地址可以访问到html/mn/dist路径下的index启动页面。

try_files $uri $uri/ / index.html是刷新页面报错404的处理方式。

xmh-git
关注
Windows系统使用Nginx部署Vue
2301_78834737的博客
07-12 2875
Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。,出现以下界面说明启动成功(由于笔者电脑80端口被占用，所以更改为8080，nginx默认为80端口)。工具，将Nginx转换为Windows服务，Windows系统重启后会自动启动Nginx服务。​ 配置文件如下：主要包含日志位置、启动和关闭，目录根据自己安装位置调整（不要有中文）。用cmd命令窗口，cd 到nginx解压目录，，根据系统版本下载对应工具。
Windows服务器上用NGINX部署vue项目
热门推荐
洋成林
02-27 2万+
背景：项目前端vue 2.0 + elementUI，后端spring boot 2.0.3，服务器是Windows 8。此处默认数据库已经安装到位。 1、服务器上安装NGINX，参考https://blog.csdn.net/yangfengjueqi/article/details/87973698 2、后端项目生成可执行jar包，参考https://blog.csdn.net/yangf...
vue 项目前端部署以及windows ,linux 端部署遇到的问题
大脸猫~
09-13 9601
Vue项目打包之后，部署有两种方式，一是前台打包后扔给后台，放置在后台项目的根目录下就可以了。这种是最简单的。还有一种方式就是前端单独部署，这里讲的是后者 前端如何单独部署呢？ 一个最简单的办法就是使用Nginx部署辣 一.我们将自己的Vue项目打包 运行npm run build 会在项目中生成一个叫dist文件 二.安装Nginx Nginx是一个类似于Tomcat的服务器，部署前...
Windows使用Nginx部署Vue项目
u012887668的博客
04-13 4070
在vue.config.js文件配置outputDir，为打包项目的文件夹名，自己命名参考vue项目下的package.json文件里scripts配置的prod命令，执行打包命令打包完成后的文件夹内文件如下图所示。
【Nginx】在Windows服务器上用Nginx部署Vue前端全流程（附避坑指南）
最新发布
VT_馒头的博客
02-28 5030
Windows Nginx配置Vue、Vue项目打包部署、前端服务器部署教程：前端开发者 | 运维新手 | 需要快速上线项目者。
windows服务器使用nginx部署vite vue项目
2301_78330059的博客
07-23 938
多项目部署这里就不做赘述了，大概思路就是 nginx.config 里面多配置几个service，html文件夹下自己新建几个不同名称的文件夹，每个service里面根据需求配置不同的内容指向不同的文件夹。上图中是生产环境url的配置，/yida前面是服务器地址，5000是给nginx开放的端口，/yida是前文截图中nginx.config的配置代理的那个红框，为了让nginx识别。如果一切顺利的话，在本地输入服务器地址+配置的开放端口即可正常访问，且跨域问题也会解决。若有问题，欢迎在评论中提出。
windows使用本机启动nginx并部署vue项目
gongruhua的博客
11-14 671
查看 \nginx-1.26.2\logs 目录下是否有 nginx.pid 文件，有则是已启动，没有则是已停止。注意：nginx.conf修改后需要重启nginx才会生效。直接到nginx官网。
web服务器nginx+部署前端vue项目
03-22
### Nginx 与前端 Vue 项目的部署 #### 一、Nginx 概述 Nginx 是一款广泛使用的高性能 HTTP 和反向代理 web 服务器。它以其出色的并发处理能力和较低的内存消耗而闻名。根据相关报告，Nginx 能够支持高达 50,000 ...
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
在使用nginx部署Vue项目时，有时候会遇到找不到JavaScript和CSS文件的问题。这主要是因为Webpack在构建过程中生成的静态资源引用路径不正确。本文将详细介绍解决这一问题的方法，主要包括vue-cli@3的配置方式和vue-...
Nginx 部署前端 Vue 项目实战指南
miracle的专栏
09-02 2629
在执行此命令之前，需要确保路由配置中的模式正确。修改完成后，保存配置文件，并在命令行中执行相应命令重启 Nginx 服务。您可以从 Nginx 官方网站下载安装包，然后按照安装向导进行安装。，回车，即可启动 Nginx 服务。可以在任务管理器的进程中看到启动的 Nginx 服务。从 Nginx 官方网站下载安装包，按照安装向导进行安装。另外，还需要对项目中的一些配置文件进行修改，比如在。要修改 Nginx 的配置文件，例如修改端口，可在。指令，将默认的 80 端口修改为您想要的端口，如。
Windows 使用 Nginx 部署 vue 项目
Wxin0721的博客
05-07 6237
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...
windows使用nginx部署vue项目，另加小皮面板Apache部署
qq_45757927的博客
02-29 1937
启动后在浏览器输入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 2158
首先需要在 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。
Nginx 部署vue项目 （Windows版）
weixin_49107940的博客
08-16 3192
项目在本地正常运行后再打包部署。
使用nginx在windows服务器上部署vue项目
weixin_52526235的博客
03-06 2806
一、下载nginx Nginx下载官方网址：http://nginx.org/en/download.html 选择稳定版本，下载zip文件，经过解压 就可以得到以上的文件夹，可以直接点击nginx.exe进行运行，也可以 通过命令行运行 start nginx 然后就可以访问 二、配置dist 把前端打包的dist文件，放到html里边 然后打开nginx.conf文件，进行修改配置 然后就可以访问了 注意 1、nginx的文件夹最好不要以n开头不然/n会被转译 2、打开nginx进程过多，
Windows服务器部署前端vue项目
weixin_43193877的博客
03-03 1万+
阿里云Windows服务器部署前端vue项目 准备工作 下载node.js（略）http://nodejs.cn/download/ 下载Nginx http://nginx.org/en/download.html Nginx安装启用方法参考：参考1、参考2 注意：刚下载完Nginx后，没有配置环境变量的情况下，需要去Nginx文件下使用命令窗口操作 Nginx 下载完后是这样子 把打包好的dist文件放入html目录下 找到conf/nginx.config文件，用文本方式打开，进行
在Windows系统上使用Nginx部署Vue3项目
VVelaciela的博客
09-01 5187
Windows系统下如何使用nginx部署vue3项目
Windows使用Nginx部署Vue项目，动静分离配置
weixin_44315761的博客
04-28 7327
1.打包Vue项目 npm run build 打包完成后会得到一个【dist】静态资源 2.下载nginx压缩包 nginx下载 我这里下载的是windows稳定版 解压点击nginx.exe启动，访问localhost出现下面提示，说明启动成功 3.部署vue到nginx 把打包vue生成的dist文件夹复制到nginx的html目录下 进入conf目录，打开nginx.conf文件，置nginx跳转路径，将路径修改成我们项目的访问路径 测试访问成功 ...
windows服务器Nginx部署vue router 项目
05-30
好的，下面是部署步骤： 1. 在 Windows 服务器上安装 Nginx，可以参考官网的安装指南。 2. 将 Vue 项目打包成静态文件，可以使用命令 `npm run build` 或者 `yarn build`。 3. 将打包后的文件放置在 Nginx 的 web 目录下，一般是 `/usr/share/nginx/html/`。 4. 在 Nginx 的配置文件中添加配置，开启 Vue Router 的 history 模式。配置示例如下： ``` server { listen 80; server_name example.com; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 其中 `try_files` 配置可以让 Nginx 在找不到对应文件时，返回 `index.html` 文件，避免 Vue Router 的路由跳转出现问题。 5. 重新加载 Nginx 配置文件，使其生效。可以使用命令 `nginx -s reload`。 这样就完成了在 Windows 服务器上部署 Vue Router 项目的 Nginx 配置。希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值