提示：我想知道我的朋友在开发前端时是否感到困惑

在包装前端项目后，我如何打包对后端服务的静态资源？访问后端服务时是否没有跨域问题？如何解决？如果我想自己修改部署的目录，该怎么办？

实际上，有这种疑问的不仅是您。当我第一次与前端接触时，我会为这些问题感到困扰，因为我没有后端的开发经验。但是今天，我们将立即弄清楚这个问题，让我们进入前端。知识系统是从点到线的，从线到表面〜

1。澄清问题

我们知道我们通常在开发过程中使用代理。原理是：浏览器将首先访问本地节点服务器，然后将节点服务器代理您要访问的后端API接口，但是我们可能在正常时间内没有节点服务器的概念，因为节点服务器是在，我们通常以以下方式设置它们

但是，在我们的项目启动之后无法使用此方法（因为节点是我们的本地开发环境，并且不能在线使用。最终生产地址配置是？如何访问后端接口？它是直接配置与此的路径吗？还是直接的相对路径/产品？要了解这些事情，您必须首先了解什么。

2。是

它是开源高性能，轻巧的Web服务器和反向代理服务器。它具有事件驱动的，异步的非阻滞体系结构，可广泛用于构建高性能网站，应用程序和服务。

在日常发展中，我们经常听到术语远期代理和反向代理。那么什么是反向代理，什么是前锋代理？

反向代理：服务器的IP被阻止，这意味着客户端不知道哪个服务器的真实地址是。客户端访问的地址或域名是服务器访问的地址。

正向代理：这与反向代理完全相反。目前，服务器不知道哪个真实客户端是，这意味着代理服务器是直接访问服务器的服务器。

3。前端用法解决跨域

什么是跨域？跨域是指浏览器环境中的跨域，当网页代码的目标资源通过AJAX或其他技术发送HTTP请求时，位于不同的域名，端口或协议下。

如何解决跨域，因为服务器和服务器请求之间并非跨域之间发生，因此跨域的解决方案之一是使用此解决方案

浏览器或客户端发送请求：http ::服务器会聆听端口80，并且服务器将请求转发到后端的真实服务器地址，从而实现了代理。

基本配置项目分析

server { listen 80;

server_name yourdomain.com; location / { // 无论访问所有路径都返回前端静态资源dist内容 root /path/to/your/frontend; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://backend-server-address/api/; // 真实后端api地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }

在前端代码中使用相对路径 / API /启动请求时，请求将转发到真实的后端地址。但是，您发现没有多少前端项目的生产环境地址只是类似于 /API的相对路径。很少是直接的绝对路径。

当您要求时，前端静态资源将返回前端。前端代码中使用的相对路径/API将基于当前域名构建完整的请求URL。因此，前端代码请求的完整URL后端地址为 /api /xxx，其中 /xxx表示特定的后端接口路径。

反向代理配置中的 / API /指令将从 / api /开始匹配请求，并向后端服务器代理这些请求。因此，当当前端代码启动相对路径请求 /API /XXX时，它将请求转发到 /api /xxx以实现与后端接口的通信。

总而言之，前端代码中的相对路径/API将根据当前域名构建完整的请求URL，而反向代理配置将这些请求转发到后端服务器上的相应路径。这样，前端代码可以与后端接口进行通信。

4。前端生产环境配置

由于我们知道如何代理以及前端包装路径的通常是什么，因此让我们谈谈如何快速并完全建立一个基本的项目作为前端新手。实际上，如果我们开发基本的东西，我们通常会使用脚手架，如果您在Vue中开发它，我们可以使用它来快速构建项目。实际上，在构造之后，您可以直接部署NPM在后端服务器上运行的软件包。产生的软件包的根路径是默认值 /通过上述知识，不难理解。

如果我们想自己修改道路怎么办？我们可以在vue..js中配置它，如下所示：

module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/prod' : '/' };

因此产生的包装的静态资源的路径如下

如果您直接使用默认软件包路径，则如下

如果我们将Vue-CLI直接用于包装，则开发环境和生产环境之间通常没有区别。那么，如果我们需要在DIST文件夹级别上添加一个Prod文件夹级别，那么目前该怎么办？我们可以使用vue ..以下配置添加到JS文件中。

outputDir: 'dist/prod'

这样，执行NPM运行将生成以下内容，您会发现我们在DIST文件夹中添加了另一层文件夹。

5。摘要

最后，在前端软件包是一个静态文件之后，这是一个相对路径。后端将收听此资源的请求。匹配 /匹配时，它返回静态资源。当匹配 /时，它将反转请求。代理到真实后端服务器的地址，前端套件的相对路径以及特定的域名或IP将插入前方，从而打开在线前端访问的基本内容。