前端项目真实部署上线流程

最新推荐文章于 2025-07-08 17:56:41 发布
最新推荐文章于 2025-07-08 17:56:41 发布
阅读量1k 收藏 26
点赞数 30
CC 4.0 BY-SA版权
文章标签： 前端 项目部署 项目打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_81122125/article/details/147801485

在线笔记：前端项目上线 · 语雀

笔记密码：tz35

禹神：前端项目部署指南，前端项目打包上线_哔哩哔哩_bilibili

笔记资料（有视频里的my-serve）：

https://pan.baidu.com/s/1isRCnST_wt1Ayk-NPZ2SeA?pwd=72a9 提取码: 72a9

目前大二，每次做完vue项目时都会讲打包部署，但是从一开始的本地部署，解决cors跨域，解决刷新404等问题，到nginx和pm2部署，感觉这部分内容的学习非常杂乱，没有一个视频会全面讲清楚，因此这几天我自己搜集不少资料，终于将基本部署弄明白了，现在分享给大家！

1. 项目打包

  • 我们开发用的脚手架其实就是一个微型服务器，用于：支撑开发环境、运行代理服务器等
  • 打包完的文件中不存在：.vue、.jsx、.less 等文件，而是：html、css、js等
  • 打包后的文件，不再借助脚手架运行，而是需要部署到服务器上运行
  • 打包前，请务必梳理好前端项目的ajax封装（请求前缀、代理规则等）

2. 本地服务器部署

2.1. 具体操作步骤

  • 第一步：准备一个本地的服务器

本地服务器可以用：Java、Php、Go、Node.js 等语言编写，本教程采用是Node.js编写服务器，端口号为：8088，且已经配置了public文件夹为静态资源。

点击下载服务器：

  • 第二步：进行前端项目打包

具体的打包命令，可以参考package.json中的scripts字段配置。

  • 第三步：将打包结果交给服务器

将打包生成的文件内容，放到服务器的静态资源文件夹中（上文中的public文件夹）

  • 第四步：测试访问前端项目（在自己编写的MY-SERVE本地服务器上）

浏览器访问：http://localhost:8088即可看到我们的项目，但此时会遇到两个问题：

  1. 页面刷新 404
  2. ajax 请求无法发送

2.2. 解决刷新 404 问题

问题分析：前端项目的路由，通常分为两种工作模式，分别为：

1. hash模式

hash 值又称锚点，通常用于指定网页中的某个位置，例如下面的网址：

央视网_世界就在眼前，其中的#SUBD1605080062959435就是 hash 值，hash 值只在客户端（如浏览器）中使用，是不会带给服务器的，所以使用 hash 模式时，不存在刷新 404 问题。

2. history模式

history 去掉了URL中的#号，可以让应用的URL看起来更美观，带来的问题就是刷新时，会将前端路由携带给后端，而后端没有对应资源的匹配，就出现了 404 问题。

解决方案一：将前端路由器工作模式改为 hash 模式 —— 不太推荐。

解决方案二：让服务器在收到未配置的GET路由时，都返回index.html即可。

方案二最终其实是把 url 中的 path，交给了前端路由去处理，具体配置如下：

app.get('*',(req,res)=>{
	res.sendFile(__dirname + '/public/index.html')
})
// 强制返回index.html,那么index.html的JS就能生效,即可处理前端页面路由

也可以借助connect-history-api-fallback中间件完成配置

const history = require('connect-history-api-fallback');

app.use(history());
// 配置静态资源
app.use(express.static(__dirname + '/public'))

使用connect-history-api-fallback可以让配置更灵活，比如/login临时不需要作为前端路由处理，就可以按照如下方式配置

app.use(history({
	verbose:false,
	rewrites:[
		{ from: /^\/login.*$/, to: (context) => context.parsedUrl.path },
	]
}))

2.3. 请求无法发送问题

问题分析：脱离脚手架后，就没有了代理服务器，无法转发请求到【提供数据】的服务器。

如何解决？—— 在 Node 服务器中借助http-proxy-middleware中间件配置代理，具体配置如下：

// 引入createProxyMiddleware
const { createProxyMiddleware } = require('http-proxy-middleware')

// 配置代理中间件
app.use('/dev', createProxyMiddleware({
	target: 'http://sph-h5-api.atguigu.cn',
	changeOrigin: true,
	pathRewrite: {
		'^/dev': ''
	}
}))

3. nginx 服务器部署

3.1. nginx 简介

Nginx（发音为“engine-x”）是一款高性能的 HTTP 服务器和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 代理服务器。Nginx 最初由 Igor Sysoev 编写，于 2004 年发布。它以其高性能、高稳定性、丰富的功能集和低系统资源消耗而闻名，主要功能有：

  1. 反向代理
  2. 负载均衡
  3. 静态内容服务
  4. HTTP/2 支持
  5. SSL/TLS 支持
  6. 高速缓存

3.2. nginx 配置代理练习

今日头条接口地址：https://www.toutiao.com/hot-event/hot-board/?origin=toutiao_pc

直接向其发送 Ajax 请求会有跨域问题，接下来我们借助nginx解决跨域问题

配置方式一：不过滤前缀

以解决今日头条跨域为例，不干/hot-event掉前缀配置如下

location /hot-event {
  # 设置代理目标
  proxy_pass https://www.toutiao.com;

  # 允许跨域
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' '*';
  add_header 'Access-Control-Allow-Headers' '*';
  add_header 'Access-Control-Expose-Headers' '*';
}

前端写法

axios.get('http://localhost:8099/hot-event/hot-board/?origin=toutiao_pc')

配置方式二：过滤前缀

解决今日头条跨域，不干/hot-event掉前缀，nginx配置（8099 端口）

location /dev/ {
  # 设置代理目标
  proxy_pass https://www.toutiao.com/;

  # 允许跨域
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' '*';
  add_header 'Access-Control-Allow-Headers' '*';
  add_header 'Access-Control-Expose-Headers' '*';
}

前端写法

axios.get('http://localhost:8099/dev/hot-event/hot-board/?origin=toutiao_pc')

备注：使用下面配置删除上游服务器的指定响应头

proxy_hide_header Access-Control-Allow-Origin;

3.3. nginx 部署前端项目

整体思路：让nginx充当两个角色，既是 静态内容服务器，又是代理服务器。

  1. 修改nginx配置如下，注意nginx的根目录最好不是 C 盘
# 配置nginx根目录
location / {
  root   D:\dist;
  index  index.html index.htm;
}

# 配置代理
location /dev/ {
  # 设置代理目标
  proxy_pass http://sph-h5-api.atguigu.cn/;
}
  1. 修改前端项目，让所有请求都转发给 /dev，随后重新打包
const request = axios.create({
  baseURL:'/dev',
  timeout:10000
})
  1. 随后直接访问nginx服务器即可，例如 nginx如果运行在8099端口，则访问：
http://localhost:8099
  1. 随后会遇到刷新404问题，追加nginx配置来解决
# 配置nginx根目录
location / {
  root   D:\dist;
  index  index.html index.htm;
  try_files $uri $uri/ /index.html; # 解决刷新404
}
# 配置代理
location /dev/ {
  # 设置代理目标
  proxy_pass http://sph-h5-api.atguigu.cn/;
}

4. 云服务器部署

我们可以在云服务器上借助nginx完成部署，大致流程与本地nginx部署一致

  1. 关于购买云服务器，可选择：阿里云、腾讯云等
  2. 关于操作系统，看个人习惯，Ubuntu、CentOs、RedHat、都不错
  3. 购买完成后记得重置密码
  4. linux 远程操作软件：Xshell、Xftp
  5. 具体配置如下：
  • 给服务器安装nginx
yum install nginx
  • 将打包后的前端资源放在：/var/sph文件夹中。
  • 使用Xftp配置服务器的 nginx，修改文件：/etc/nginx/nginx.config。
# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
          root   /var/sph;
          index  index.html index.htm;
          try_files $uri $uri/ /index.html; # 解决刷新404
        }
        # 配置代理
        location /dev/ {
          # 设置代理目标
          proxy_pass http://sph-h5-api.atguigu.cn/;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
}

说明：Xshell是连接你买的服务器的，Xftp是用来上传你的项目文件的

  1. 此外还有宝塔一类的可视化操作工具，可以在https://www.bilibili.com/video/BV1D64y1P7ht/spm_id_from=333.337.search-card.all.click&vd_source=f61303739fe44d36d02eae331c08b0c6这个链接学习如何操作
  2. 下面这个链接会教你怎么大学生怎么白嫖阿里云服务器
  3. 除nginx服务器软件外还有不少其他替代的，可以仔细了解搜索

白嫖阿里云一年免费服务器大学生专属云工开物活动领取300无门槛抵扣金购买过程详细解说领取方法_哔哩哔哩_bilibili

可能遇见的问题：

  1. 注意视频var/新建文件夹命名不要加空格
  2. 默认阿里云只有两个端口号，需要自己加nginx默认的80端口，或者你改了其他端口的话也要自己手动去加

一痕夕光
关注
从源码到部署：企业级 Agentic AI 项目上线全流程解析
努力分享一些人工智能、计算机视觉、影像等相关的知识干货！
04-26 190
在大多数 Agent 项目停留在原型和 Demo 阶段的背景下，真正将智能体系统推向企业级生产环境，必须走过一条完整且严谨的工程路径。本篇基于实战经验，系统拆解了从 Agentic AI 项目源码搭建、模块化联调、接口微服务设计，到容器化部署、安全边界构建、日志审计与故障恢复等全流程细节。每一章节均聚焦可落地的工程实践，涵盖行为链闭环打通、多租户隔离、DevOps观测、模型与工具热更新机制，最终形成一套可复现、可扩展、可审计、可持续演进的企业级智能体平台上线体系，为智能系统真正进入生产环境提供标准化路径。
软件项目从需求分析到上线的全流程解析
数字魔方操控师的博客
03-21 450
开发过程遵循一定的开发规范和流程，如采用敏捷开发方法，将项目划分为多个迭代周期，每个周期完成一定的功能模块开发，并进行持续集成和持续交付，确保代码的质量和项目的进度。由专业的测试人员对整个系统进行全面的测试，包括功能测试（验证系统是否满足需求规格说明书中的所有功能要求）、性能测试（测试系统在高并发、大数据量等情况下的响应时间、吞吐量等性能指标）、安全测试（检查系统是否存在安全漏洞，如 SQL 注入、跨站脚本攻击等）、兼容性测试（测试系统在不同操作系统、浏览器、移动设备等环境下的运行情况）等。
Vue打包上线部署
soos的博客
07-06 4483
一、路径问题1、脚手架+webpack打包通过npm run build，但是后台tomcat部署上线的时候，会衍生出一些问题，比如，路径问题（因为在项目中，我们使用了绝对路径，这里必须要使用相对路径，但是打包后还是会报错，说是找不到assets文件夹下的各种资源，包括images,css,js,是因为，在当初在全局引用的时候写在了index.html中，安全起见，可以写在app.vue中）；2、...
【项目上线】项目上线操作步骤
aaaa_aaab的博客
08-02 2122
项目上线流程操作记录
前端项目上线
最新发布
2301_80232843的博客
07-08 358
前端项目打包，指的是将你开发时的源码（HTML、CSS、JS、图片等），通常是压缩优化后的文件夹，可以部署到服务器或 CDN 上。
项目上线简单流程
qq_41484287的博客
12-01 5934
正式环境代码发布流程 1.前期准备 1.1数据库脚本 将所需数据库全部转存为脚本文件 若是项目升级 尽量为增量更新数据库，尽量保证正式环境数据安全 ​ 在测试环境修改数据 表结构的时候 尽量以文档的形式记录 在项目更新的时候统一执行 1.2后端jar包 1.项目上线前在测试环境应该做好相应的测试保证接口的正确性 2.检查好上正式环境pro配置文件的环境配置，确保其正确性 3.多环境配置，在打包时一定要注意切换为正式环境配置 1.3前端dist包 具体以前端为准，保证代码正确以及
项目上线整体流程
主要发布一些日常学习代码及理解
11-24 8832
上线流程整体步骤
项目上线流程
Test architect
05-29 751
简介 本文主要讲解一个项目想要发布到公网的流程，包括服务器的购买、以及域名的购买，以及需要注意的事项。 互联网与生活密不可分。 比如打开浏览器访问一个网站。有人会思考，做了一个网站如何将它发布到互联网呢，让同事朋友可以看到呢？ 课程准备工作 必备条件：(本次使用标红) 1、一台Linux（CentOS、Ubuntu）服务器 2、一款Web服务器（Nginx、Apache、Tomcat） 3、一个属于自己的独立域名（cn/com/org） 服务器购买以及配置 服务器类型（Windows和Linux） 今天.
前端项目打包优化及上线
m0_49992474的博客
02-19 3156
前端项目优化及上线根据自己项目实际，进行webpack配置，这里只是一个参考，关于上线很多功能作为了解。 优化问题 项目优化策略步骤及详解安装配置 1.生成打包报告=>为了直观发现项目中的问题，共有两种方式 2.第三方库启用CDN => 通过externals加载外部CDN资源 3.Elemet-ui组件按需加载 =>通过cdn的形式优化Element-ui的打包 4.路由懒加载 1.安装@babel/plugin-syntax-dynamic-import包 2.在bab
vue3 项目部署，Nginx配置https,重定向，详细流程_vue3 前端项目ngnix配置
2401_84435700的博客
04-27 609
其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。刚刚安装完成后，你的内容肯定是非常简洁的，你只需要配置对相应的参数，并可以通过保存按钮，基本是没有问题的。此时，nginx就已经安装好了，我们只需要点击nginx图标，点击配置文件选项即可使用ngnix了；一个web项目完成后，我们需要打包部署上线，关于打包的实战在我的。前端的部署，我们利用Nginx。
Vue项目打包部署上线时devServer.proxy代理失效如何解决？使用nginx反向代理
m0_67403076的博客
06-18 6746
如果文章有歧义，请各位大佬指出，避免误导更多的人！！最开始，我天真的将中的代理地址改成了服务器地址，然后就执行了打包dist文件，将其部署上线。 开开心心打开网页登录，发现根本跳转不了，报错如下。 错误映入眼前的是和，由于笔者并不是很了解nginx，所以就进入Nginx官网查看了中文文档那么什么是反向代理服务器呢？以下内容来自百度百科等等？这听着是不是和的作用很像。但实际上，它们不是一类代理： 是正向代理，是反向代理。虽然正向代理服务器和反向代理服务器所处的位置都是客户端和真实服务器之间，所做的事情也都是
项目上线的流程
weixin_67282071的博客
10-30 384
项目维护：上线之后还需要进行长期的维护工作，包括对项目性能的监测、定期备份数据和文件、修复发现的漏洞、更新项目的功能和技术等等。测试环境审核：在项目部署到测试环境之后，要进行一系列的测试，包括功能测试、性能测试、安全测试等等，以确保项目能够顺利地上线。项目开发和测试：在这个阶段，开发团队通过不断的开发和测试来保证项目的质量和稳定性，同时也要确保项目达到了预期的需求。安全审核：安全审核是必不可少的一个环节，需要对项目的安全性进行全面的检查，以确保项目能够在生产环境中安全运行。
【前端项目部署上线】
weixin_45313093的博客
05-31 2960
本文将介绍三种前端打包项目上线的方式：本地服务器部署、nginx服务器部署、云服务器部署。
前端项目上线流程
sb1234_56的博客
10-04 147
项目的上线需要的一些配置
项目上线流程（保姆级教学）
html网页设计、web前后端网站制作、大学生网页设计作业、jQuery网站设计、uniapp小程序、vue网站设计、网页成品模板、期末大作业，各种源码应有尽有，持续更新中...
04-23 1067
注册阿里云账户注册阿里云账户。
如何上线你的项目
mygoes
08-14 3233
项目上线
宝塔部署前端vue项目nginx配置
03-15
### 如何在宝塔面板中正确配置 Nginx 以部署 Vue 前端项目 #### 一、准备工作 为了成功部署 Vue 前端项目，在开始之前需完成以下准备事项： - **购买服务器**：选择合适的云服务提供商（如阿里云），并创建一台虚拟机实例，推荐使用 CentOS 或 Ubuntu 操作系统[^3]。 - **安装宝塔面板**：通过官方文档或脚本快速安装宝塔面板。该工具提供了可视化的管理界面，极大简化了 Linux 系统上的运维工作[^2]。 #### 二、环境搭建 登录到宝塔面板后执行以下操作： 1. **安装必要组件** - 在左侧菜单栏找到“软件商店”，依次安装 `Nginx` 和其他可能需要用到的服务（例如 PHP）。尽管 Vue 是静态资源项目，但某些情况下仍需要配合动态语言处理特定请求。 2. **上传构建文件** - 使用 FTP 工具（比如 Xftp）连接至服务器，将本地打包好的 Vue 应用程序目录复制到 `/www/wwwroot/your-domain.com` 下面[^1]。注意这里的路径可以根据实际需求调整，默认根目录由站点设置决定。 #### 三、Nginx 配置详解 针对 Vue 单页面应用 (SPA)，如果直接访问子路由会出现 404 错误，则需要修改默认的 Nginx 配置来支持 HTML5 History Mode： 1. 创建一个新的网站或者编辑现有站点； 2. 进入对应的域名配置选项卡下的伪静态规则部分； 3. 添加自定义规则如下所示： ```nginx location / { try_files $uri $uri/ /index.html; } ``` 这段代码的作用在于当用户尝试加载不存在的具体 URL 地址时重定向回首页 index.html 文件从而让前端框架接管渲染逻辑[^4]。 #### 四、解决跨域问题 对于前后分离架构的应用场景来说，不可避免会碰到 CORS(Cross-Origin Resource Sharing) 的挑战。可以通过两种方式应对这一情况： ##### 方法A: 修改后端允许来源头信息 确保 API 接口所在的服务器响应头部包含了正确的 Access-Control-Allow-* 字段值给定客户端许可范围。 ##### 方法B: 设置反向代理 利用 Nginx 实现内部跳转而不暴露真实地址的方式规避浏览器的安全策略限制。具体做法是在刚才提到过的高级设置区域填写目标主机的信息以及可选的内容替换表达式。 --- ### 总结 综上所述，借助于宝塔面板的强大功能可以非常便捷高效地完成整个流程从初始化到最后上线的过程。只要遵循上述指导原则，并妥善处理好各个细节之处就能顺利实现预期效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值