Vue项目在Windows系统打包部署到Nginx服务器的两种方式

腾云驾雾的猿

已于 2022-09-13 17:15:48 修改

阅读量2.2k

点赞数 2

文章标签： nginx 服务器 apache

于 2022-08-26 14:00:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_65188765/article/details/126542090

版权

本文介绍了在Windows系统中如何将Vue项目打包并部署到Nginx服务器，包括Nginx的启动与停止，以及两种部署项目的方法：一是将dist内容替换nginx/html，二是将dist文件夹放在nginx目录并修改配置。最后，通过刷新重启Nginx和网址检测确认部署成功。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

文章目录

一、Nginx

一、Nginx

Nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器；同时也是一个IMAP、POP3、SMTP代理服务器；

nginx可以作为一个HTTP服务器进行网站的发布处理，另外nginx可以作为反向代理进行负载均衡的实现。

（一）快速使用

下载地址：http://nginx.org/en/download.html

在这里插入图片描述

下载解压后如图显示

在这里插入图片描述

1、启动

（1）启动方式

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

腾云驾雾的猿

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue项目如何打包并部署(nginx)

web18536564348的博客

09-10

2891

深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

【Nginx 】Nginx 部署前端 vue 项目

m0_74825746的博客

01-17

1529

在两种系统中，安装Nginx的过程都相对简单，主要区别在于使用的软件包管理器不同。这包括访问Vue应用的主页，以及尝试访问应用中的各个路由，确保它们都能正确加载。文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。在CentOS或RHEL系统上安装Nginx的过程与Ubuntu/Debian略有不同，主要体现在软件包管理器的使用上。在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。

参与评论您还未登录，请先登录后发表或查看评论

在Windows系统上使用Nginx部署Vue3项目

VVelaciela的博客

09-01

5172

Windows系统下如何使用nginx部署vue3项目

windows服务器nginx部署vue项目

最新发布

生命不止，学习不止

03-04

249

windows服务器如何通过nginx部署vue项目

Windows使用Nginx部署Vue项目

u012887668的博客

04-13

4057

在vue.config.js文件配置outputDir，为打包项目的文件夹名，自己命名参考vue项目下的package.json文件里scripts配置的prod命令，执行打包命令打包完成后的文件夹内文件如下图所示。

nginx部署前端vue项目

破损的天堂鸟博客

09-02

1962

在Nginx配置文件中定义一个或多个后端服务器组（upstream），并指定这些服务器的地址和端口。

vue运行dist 打包后项目+nginx简单使用

小小前端攻城狮

12-05

2034

vue运行dist 打包后项目+nginx简单使用

Vue中跨域及打包部署到nginx跨域设置方法

10-16

本文将详细介绍Vue项目开发中遇到的跨域问题及其解决方法，以及如何将打包后的Vue项目部署到Nginx服务器，并设置跨域。 ### 跨域问题的概述跨域问题是指由于浏览器的同源策略限制，前端项目中的JavaScript代码...

Windows系统下如何使用nginx部署vue2项目

m0_37873510的博客

09-24

8120

windows系统下使用nginx部署vue项目

前端——》通过nginx和Apache两种方式部署vue前端项目

叙传

02-10

2809

一：通过nginx部署我们默认linux服务器上已经安装好nginx环境，我将vue编译的dist文件夹放到了 /root/build/x-frontend-manage目录下步骤一：编写nginx配置文件找到nginx的安装目录，注意不是nginx软件包的存放目录，如下图所示到conf目录下执行vi nginx.conf user root; # 此处需要修改为root worker_processes 1; pid logs/nginx.pid; events {

Windows系统下通过nginx配置多项目

Bruce__taotao的博客

05-10

2176

在windows电脑启动一个nginx 测试配置多前端项目，一个pc端（vue3+ts+vite ，history路由），一个mobile端（vue3+ts+vite ，hash路由）。记录单个端口下，利用nginx部署 pc前端项目（history模式路由）与mobile前端项目（hash模式路由）其中的修改。

vue【简单】项目打包部署本地nginx（Windows）

m0_59579040的博客

03-26

7504

vue【简单】项目打包部署本地nginx（Windows）安装nginx（windows）创建vue项目（vue2 ）打包部署一、修改publicPath: ‘/oauth2-client/’ publicPath：默认为’/’） vue.config.js module.exports = { // publicPath: process.env.NODE_ENV === "production" ? "/oauth2-client/" : "/", publicPath: '/oauth2

Windows环境下Vue打包且部署在Nginx(附带Nginx下载教程):

2202_75816490的博客

07-17

611

我这里把Nginx下面的conf文件夹下面的nginx.conf里面的端口改成81了所以我是81。接着在浏览器里面导航栏输入。点击doenload，

Gitlab的gitlab-runner将Vue服务端打包及自动部署

weixin_33935505的博客

05-14

2724

上次给CI环境搭建好了，这次写了一个脚本用于服务端打包及部署使用,解决了前端需要频繁打包的问题，即时将代码推到工程库，服务端自动打包作发布,然后测试人员即时测试，尽早发现问题。发布原理：我没有通过软链的方式作发布，因为目前在Dev和Test环境也不需要用到回滚的地方，就是直接将打包好的文件解压到指定的目录下面。主要流程如下： gitlab-runner中.gitlab-ci.ym...

windows中使用Jenkins打包,部署vue项目完整操作流程

weixin_45356397的博客

07-19

1041

在Jenkins已经安装的基础上,可以开始下面的教程。网上有许多安装教程,简单罗列几个。

【极简】windows下，vuejs打包，用Nginx部署http服务

Yonggie的博客

04-17

296

首先在vue项目下，在项目目录会出现dist文件夹。然后下载Nginx，看其是http服务和反向代理服务的实现程序。解压后可以看到目录结构中有一个html目录，删掉原有的，复制进去dist目录的所有内容（是dist文件里面的内容，不是dist文件夹）。然后可以双击nginx.exe，在浏览器访问就可以了。

Vue前端部署

weixin_40598838的博客

06-19

1150

通常做好前端开发后都需要部署到相应服务器上，那么如何部署呐？

云windows iis部署vue前端项目步骤

zzsaixuexi的博客

08-21

504

以及开放域使用权限 allowedHosts: ‘all’,ip地址选择未分配（我直接分配过不太好用，直接未分配就行）端口选择如果是80端口那么可以直接访问地址不需要带端口号。然后将前端全部文件传到想要部署的windows上。（需要到**云上报备下我这个用的是阿里云）如果选用的是其他端口则需要加端口号访问。换到云服务器上需要前端修改对应的接口。物理路径现在前端文件中的dist文件。网站名称输入你想要用的二级域名。打包后会产生一个dist文件。打开iis 添加网络。先进行vue项目打包。

前端vue简单部署操作

yzs2022的博客

10-21

490

前端如何部署项目到服务器