前端项目打包摆设

打包和摆设前端项目是将开发环境中的代码转化为生产环境可直接运行的静态文件，并将其摆设到服务器上的过程。

1. # 项目打包
2. pnpm run build
5. # 上传文件至远程服务器
6. 将本地打包生成的 dist 目录下的所有文件拷贝至服务器的 /usr/share/nginx/html 目录。
8. # nginx.cofig 配置
9. server {
10.         listen     80;
11.         server_name  localhost;
12.         location / {
13.                         root /usr/share/nginx/html;
14.                         index index.html index.htm;
15.         }
16.         # 反向代理配置
17.         location /prod-api/ {
18.       # api.youlai.tech 替换后端API地址，注意保留后面的斜杠 /
19.       proxy_pass http://api.youlai.tech/;
20.         }
21. }

复制代码

1. 前端项目打包

以 Vue 项目为例，一样平常来说，打包是把项目中的源代码转换成压缩过的、可以直接在浏览器中运行的 HTML、CSS、JS 等文件。

1. pnpm run build

复制代码

1.1 下令表明

• 编译代码: 将 Vue 文件（.vue），JS（.js），CSS（.css）等代码通过打包工具（比方 Vite、Webpack）编译成普通的 HTML、CSS 和 JavaScript 文件。
  
• 压缩优化: 通过工具压缩文件体积，好比移除空格、表明，合并代码块等，减少网络传输量。
  
• 输出到 dist 目录: 编译完成的文件会放在 dist 目录中，这个目录包罗了项目的所有静态文件，直接可以被服务器用于摆设。
  

1.2 打包文件内容

• index.html: 前端页面的入口文件。
  
• assets/: 静态资源文件（CSS、图片、字体等）。
  
• js/: 编译后的 JavaScript 文件。
  

2. 上传打包文件到服务器

打包完成后，需要将 dist 目录中的所有文件上传到长途服务器。常用的工具和方法包括：
（1）SCP (安全拷贝协议)
（2）SFTP: 可以使用 WinSCP、FileZilla 等工具，手动上传文件至服务器。
（3）CI/CD 管道: 如果项目设置了 CI/CD，可以自动化摆设流程。
由于这部操纵实现并不复杂，我就直接将本地打包天生的 dist 目录下的所有文件拷贝至服务器的 /usr/share/nginx/html 目录。
3. Nginx 设置

当文件上传到服务器后，需要通过 Nginx 举行摆设和服务。Nginx 是一个常用的 Web 服务器，用于处理 HTTP 请求并提供静态文件服务。
3.1 根本的 Nginx 设置

1. server {
2.         listen     80;  # 监听 80 端口，通常是 HTTP 默认端口
3.         server_name  localhost;  # 服务器的域名或 IP 地址
4.        
5.         location / {
6.                 root /usr/share/nginx/html;  # 指定静态文件根目录
7.                 index index.html index.htm;  # 默认打开的首页文件
8.         }
9. }

复制代码

• listen 80: 监听服务器的 80 端口，通常是 HTTP 的默认端口号。
  
• server_name: 界说了服务器的名称或 IP 地点，当用户访问该地点时会触发此服务器设置。
  
• location /: 设置根路径的请求时如那边理，root /usr/share/nginx/html 指定了静态资源文件的路径，Nginx 会从这个路径返回 index.html 页面。
  

3.2 反向署理设置（办理跨域问题）

前端和后端通常是分离摆设的，也就是说，前端页面大概通过 AJAX 请求后端接口。如果前端页面和后端 API 处于不同的域名或端口时，浏览器会产生 跨域请求 问题。
为了办理跨域问题，可以通过 Nginx 设置反向署理。

1. server {
2.         listen     80;
3.         server_name  localhost;
5.         location / {
6.                 root /usr/share/nginx/html;
7.                 index index.html index.htm;
8.         }
10.         # 反向代理配置
11.         location /prod-api/ {
12.                 # 将前端 `/prod-api/` 请求代理到后端 API 地址
13.                 proxy_pass http://api.youlai.tech/;
14.                 proxy_set_header Host $host;
15.                 proxy_set_header X-Real-IP $remote_addr;
16.                 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
17.                 proxy_set_header X-Forwarded-Proto $scheme;
18.         }
19. }

复制代码

• proxy_pass http://api.youlai.tech/: 将所有以 /prod-api/ 开头的请求署理到指定的后端 API 地点。在前端代码中，发起 AJAX 请求时只需调用 /prod-api/，Nginx 会把请求转发给后端服务地点 http://api.youlai.tech/。
  
• proxy_set_header: 这部分设置设置了 Nginx 如那边理 HTTP 请求头。通常这是为确保客户端的请求 IP 和协议可以正确地传递给后端服务器。
  

4. 打开页面

在完成上述操纵之后，打开浏览器并访问服务器 IP 或域名，比方：

1. http://<your-server-ip>/

复制代码

就可以看到前端页面了。
如果设置了反向署理，在前端调用 /prod-api/ 路径的 API 时，Nginx 会将请求转发给指定的后端服务器。
5. 总结

• 项目打包: 使用 pnpm run build
  将项目转换为可供生产环境使用的静态文件，输出到 dist 目录。
  
• 上传文件:将本地打包天生的 dist 目录下的文件拷贝到服务器的 /usr/share/nginx/html 目录。
  
• Nginx 设置: 设置 Nginx，设置静态文件路径以及反向署理，办理跨域问题。
  
• 访问项目: 通过服务器 IP 或域名访问项目。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。