nginx打包部署前端vue项目全过程【保姆级教程】

已于 2025-06-25 09:17:05 修改
阅读量7.7k 收藏 64
点赞数 72
CC 4.0 BY-SA版权
分类专栏： Java技术 文章标签： 前端 nginx vue.js 运维 javascript intellij-idea Java
于 2024-10-02 11:52:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_73355603/article/details/142679613

    🤹‍♀️潜意识Java：个人主页

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！

目录

一. 打包

1.1 打包命名

1.2 打包命令执行

1.3 如何看是否打包成功

二. 下载nginx打包文件

2.1 解压文件

​编辑 2.2 打开文件

 三 . 部署到nginx 

3.1 打开dist 

3.2 部署到nginx 

四. 启动nginx 

 4.1 启动nginx

4.2 打开项目

一. 打包

1.1 打包命名

npm run build

1.2 打包命令执行

上面的打包命令在终端中执行即可，这里主要是vue项目的打包部署全过程

61a2f5d807a5431696bd71e5ba8bc380.png

1.3 如何看是否打包成功

82b1978f8781419e80943ec97fdc2e22.png

多了个dist文件夹就是打包成功了！ 

二. 下载nginx打包文件

可以去官网里面去下载，这是我从官网中下载下来的。

nginx下载教程

2.1 解压文件

如图所示【一定要在全英文路径下，否则会出现莫名其妙的报错】 

5a3e77129ef94677830e27cf510a2c09.png 2.2 打开文件

641131d3bf464a9d96c8d3b44b41bae1.png

 三 . 部署到nginx 

3.1 打开dist 

6da6d86f409c442791ff476a224a7139.png

6bda6de2233f4f93b973de57e88b9523.png

65f7b1fd0d39464eaddf510dcd239406.png

我们的文件可能不同，反正复制所有文件即可！

3.2 部署到nginx 

0b258f2ab674450da162397b88cae4fd.png

打开html 

然后把刚刚复制的全部粘贴到html中！ 

d4fbef7c30474fea8bf3462eed0705ac.png

这样就成功了！ 

四. 启动nginx 

 4.1 启动nginx

170f5b2de04c49cb9638697a854b2f15.png

点最下面的nginx.exe，会闪一下，就是打开了 

4.2 打开项目

 nginx的端口号默认端口是80

因此随便一个浏览器访问 localhost:80  即可打开部署好的前端项目

4.3 打开localhost:80，如果有页面，那么就是成功了

c7ddd84a67d54ec3a72a1186665d57ac.png

    🤹‍♀️潜意识Java：个人主页

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！

【Nginx 】Nginx 部署前端 vue 项目
衍生星球的博客
09-06 1万+
在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。通过执行命令，可以安装项目所需的所有依赖。这一步是打包流程的前提，确保了后续编译的顺利进行。根据npm的官方数据，命令在安装依赖时，会根据文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。
码神之路博客部署教程【完整版】基于Linux的Docker部署教程非常详细
m0_67393413的博客
07-30 615
之所以这么做，是因为我希望将mysql数据存储在宿主机上，docker中只是配置一个mysql环境，如果将数据库文件存储在docker上，一旦删除容器(通过rm指令)，所有的数据文件都会消失，很不安全。就是起到了编排目录的功能，关于这个挂载目录，请大家千万注意自己的目录顺序，跟着各种教程做的时候要分清他们的目录顺序和自己的目录顺序，下面是我的目录顺序。其中cd是切换目录的意思，rz是上传文件。感谢你的来访，如果觉得写的不错，麻烦点个赞鼓励一下，有问题也请留言，欢迎指出问题。...
nginx部署前端项目
AAAXiaoApple的博客
01-20 3037
1- 打开nginx文件下 nginx.conf 文件 2- 配置以下内容 server{ listen 8080; // 监听的端口，可更改 charset utf-8; server_name localhost; // 项目域名，可更改 error_page 404 /50x.html; // 错误文件地址 location / { root html/shijiazhuang; // 项目在ngnix 下面的位置（相对地址）或 绝对地址，项目不用放到nginx文件下
vue前端项目打包和部署
最新发布
z_y_j229970438的博客
06-13 1369
1.在项目终端使用npm run build命令进行打包，打包完成后我们会在左边的项目文件夹中得到dist文件夹，找到这个文件夹的位置，后续我们会用到。在打包前要将node_modules文件夹删除，否则你打包后的dist文件会非常大。前端和后端开发人员开发好后，要将前端项目和后端项目分别打包部署在前端服务器和后端服务器上。点击保存后，在nginx文件夹里面通过cmd命令进入终端输入nginx -s reload命令。将打包的前端项目文件夹复制到nginx文件夹里面，复制dist文件夹的路径，后面会用到。
在nginx中部署前端项目
JAVA_codemaster的博客
02-24 1391
通过以上步骤，就可以将前端应用部署到 Nginx 服务器上。这不仅可以提高应用的访问速度，还可以利用 Nginx 提供的各种功能，如缓存、负载均衡和安全增强等，来进一步优化你的应用。
Nginx部署前端项目
吹灭读书灯 一身都是月的博客
05-21 8806
首先当然是检查Nginx： 查看nginx的安装路径：whereis nginx nginx: /usr/local/nginx nginx常用命令： cd /usr/local/nginx/sbin ./nginx ./nginx -s stop ./nginx -s quit 安全退出 ./nginx -s reload 重新加载配置文件 ps aux | grep nginx nginx展示图片： location /images { root /us
nginx部署前端vue项目
weisian的博客
06-24 1579
通常我们会遇到一些前端单独运行的项目，没有后台，我们可以直接通过nginx的代理实现。本例已前端vue项目项目。 1、将前端项目打包程dist包 2、在服务器上部署nginx （1）、在nginx的官网下载nginx（官网：https://nginx.org/download/） 本例已1.8.1版本为例子 （2）、将tar包上传到/usr/local目录下，解压程文件夹 解压命令：tar -zxvf nginx-1.8.1.tar.gz （3）、安装nginx的依赖 执行命令：yum
使用 Nginx部署前端项目
blue_121的博客
05-23 3225
windows系统右键我们下方任务栏的黑色部分，打开任务管理器，看下nginx是否启动。，这是一个非常重要的文件，用来配置nginx服务器，默认的配置也存放在此。以windows版为例，下载后，将其解压到 本地的任一目录下；，把解压的文件放在里面，此时我们可以看到有如下目录。然后用vscode代码编辑器打开解压文件夹下的。
用Nginx部署前端项目
qq_69503426的博客
04-19 1584
然后将压缩包上传至虚拟机（需要下载Xsell和Xftp，Xsell-输入命令，Xftp-上传文件到虚拟机）点击i进行编辑，修改路径为dist在虚拟机上所在的位置，修改完成后按ECS,输入:wq即可退出（然后再依次输入以下命令（出现截图中的情况，则部署成功）需要上面两个安装包可以私信我，也可以通过其他途径下载。在浏览器中输入虚拟机端口号出现以下页面，则部署成功。（需要将第一个红色画框的内容全部“杀掉”才可以）:wq保存修改并退出，:q!以上运行内容过多，就不展示运行结果了。（出现以下内容，则还不可以）
nginx 部署前端项目
热门推荐
Amazing66的博客
12-27 1万+
1、首先将前端项目打包放在服务器上 2、修改nginx 配置文件
vue打包部署nginx 配置
01-24
vue开发完毕，打包之后上线，传到nginx服务器配置问题解决
Vue2+Nodejs(express)+Mysql部署到服务器的全过程
YAO_1212的博客
12-16 2303
这是一个全栈的部署服务器的文章
神秘的java
stay hungry,stay foolish!
11-02 2053
1.单元测试不再怕！一文学会SpringBoot单元测试2.一文搞懂🔥SpringBoot自动配置原理3.封装属于自己的Spring-Boot-Starter4.爽!🔥自定义SpringBoot的@EnableXXX注解1.灰度发布是什么？
如何在linux服务器上用Nginx部署Vue项目，以及如何部署springboot后端项目
qq_44657940的博客
03-13 3882
本文内容记录如何在Linux(Ubuntu)系统上安装Nginx，并部署打包好的Vue前端项目，最后通过浏览器访问。提示：以下是本篇文章正文内容，下面案例可供参考这样前后端项目就都部署运行了。不给过最初还得安装好数据库等一些项目中应用到的软件,才能使得项目正常运行。
Nginx 部署前端项目
m0_58749949的博客
07-30 1062
Nginx 部署前端项目
使用nginx部署前端项目
lianaozhe的博客
11-25 5903
使用FileZilla或者其他工具上传前端项目到nginx的html目录。浏览器访问：http://43.139.56.13/czczz-admin。浏览器访问：http://localhost/czczz-admin。将我们要执行的项目同样放到nginx下html目录下。可以看到，成功访问到前端页面并且调用了后端的接口。这样，一个简单去前后端分离项目就部署完毕了！-p: 将容器的 端口映射到主机的端口。–name: 启动容器的名字。可以看到，访问成功了。在浏览器访问主机ip。nginx安装成功。
Nginx部署Vue项目
Fanger_travel的博客
03-01 3652
root>：项目存放目录（如果只发布一个项目，就是直接把dist拷贝到html文件夹下这种情况，可以直接用html，否则要指定文件夹）如下图，<listen>项为nginx监听的端口，默认是80。（5）打开浏览器，输入网址：http://localhost:9528（假设配置文件中端口修改成9528）完成上一步后，打开我们的配置文件<nginx.conf>，找到<server>节点，修改参数。②打开cmd，cd切换到nginx所在文件夹下，输入命令：start nginx，回车。包解压后会得到如下目录。
Windows nginx部署前端vue项目
05-31
### 1. 安装 Nginx 在 Windows 系统中，需要从 Nginx 官网下载相应的安装包并解压。访问 [Nginx 官网](http://nginx.org/) 下载稳定版本的 Nginx 压缩包，将其解压到目标目录后，双击 `nginx.exe` 文件启动服务[^1]。 ### 2. 配置 Node.js 环境 前往 [Node.js 官网](https://nodejs.org/) 下载并安装适合的版本，确保配置好环境变量。安装完成后可以通过命令行输入以下命令验证是否成功： ```bash node -v npm -v ``` 如果显示版本号，则说明安装成功[^1]。 ### 3. 安装 Webpack 为了更好地管理前端项目，可以全局安装 Webpack 工具。运行以下命令完成安装： ```bash npm install webpack -g --registry=https://registry.npm.taobao.org ``` ### 4. 打包 Vue 项目 在 Vue 项目的根目录下，修改 `vue.config.js` 文件中的 `publicPath` 属性为 `'./'`，以确保资源路径正确加载。同时，注释掉路由文件中的 `mode: 'history'` 配置，避免因模式问题导致页面刷新时出现 404 错误。 执行以下命令进行打包： ```bash npm run build ``` 打包完成后会在项目根目录生成一个名为 `dist` 的文件夹，该文件夹即为部署所需的静态资源[^3]。 ### 5. 配置 Nginx 将打包好的 `dist` 文件夹复制到 Nginx 的安装目录下的 `html` 文件夹中。打开 Nginx 的配置文件 `nginx.conf`（通常位于安装目录下的 `conf` 文件夹），找到 `server` 块，修改 `root` 路径指向 `dist` 文件夹的位置，并设置默认首页为 `index.html`。例如： ```nginx server { listen 80; server_name localhost; location / { root html/dist; index index.html; try_files $uri $uri/ /index.html; } } ``` 上述配置中，`try_files` 指令用于处理 Vue 路由的单页应用问题，确保所有未匹配的路径都返回 `index.html` 页面[^3]。 ### 6. 启动 Nginx 完成配置后，确保 Nginx 正常启动。如果需要停止或重启服务，可以使用以下命令： ```bash # 停止 Nginx nginx -s stop # 重新加载配置 nginx -s reload ```
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

潜意识Java

源码一定要私信我，有问题直接问

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值