详解前端配置服务器地址，打造高效开发与部署环境全攻略

前端如何配置服务器地址

1、配置服务器地址的具体步骤如下：在 `vue.config.js` 文件中，利用 `proxy` 配置项来设置代理规则，以便于前端能够跨域访问后端接口，针对接口路径 `/abc`，您可以定义一个代理规则，指定目标服务器地址 `target` 以及路径重写规则 `pathRewrite`，通过这种方式，前端的请求会被代理到指定的服务器地址，从而实现跨域访问。

2、搭建Gitea托管服务器的步骤如下：下载Gitea的安装文件（如gitea-11-windows-0-amd64.exe），并将其解压到本地磁盘的特定目录，执行安装文件后，通过访问如 `localhost:3000` 的本地地址来启动Gitea服务。

3、部署前端项目至服务器：首先安装Nginx，并配置为静态资源服务器，然后将项目资源上传至服务器，在服务器上创建一个项目文件夹，并通过Git克隆项目，编辑Nginx的配置文件并重启服务，您就可以通过服务器的IP地址在浏览器中查看项目了，注意端口和防火墙的设置，CentOS7默认已安装firewalld防火墙。

4、确保安装最新版本的依赖，包括webpack 7、webpack-cli 2以及webpack-dev-server x，在 `package.json` 的 `scripts` 部分，添加启动命令 `"serve"`，以简化启动服务的流程，在 `webpack.config.js` 文件中，新增 `devServer` 节点进行详细配置。

5、将前端项目中的 `localhost` 替换为云服务器IP的步骤包括：查询云服务器的IP地址，然后修改前端项目中的 `server.xml` 文件，将 `localhost` 替换为云服务器的IP地址，将修改后的文件放置到正确的目录中即可。

如何将前端localhost替换为云服务器ip

1、在 `vue.config.js` 中添加如下配置：

```javascript

devServer: {

proxy: 'http://<云服务器ip>:<端口>'

```

说明：此方法的优点是配置简单，直接将请求发送至前端即可，缺点是JSONP仅支持GET请求，而XMLHttpRequest则提供了更完善的错误处理机制，CORS（跨域资源共享）是W3C推荐的新方案，能够使服务器支持XMLHttpRequest的跨域请求。

2、理解 `localhost` 的关键在于网络通信机制，当您在浏览器中输入域名时，DNS会将其转换为IP地址，浏览器随后根据这个IP地址发送请求，对于百度等网站，输入域名后，会通过DNS查询并使用公网IP到达服务器，而 `localhost` 则直接指向本地计算机，跳过了DNS查询过程。

3、您可以下载并安装phpnow服务器软件，按照 *** 提供的教程进行安装，过程非常简单。

4、启动后在浏览器中输入前端web服务器的IP地址和端口，`http://191.621.0.10:8080`，您将看到第一次请求由node1响应，刷新后由node2响应，这样，就实现了基于轮询算法的负载均衡效果，两个服务器节点轮流响应请求。

手把手教学：如何从零开始部署前端项目到远程服务器

1、另一种便捷的方法是设置一个全局变量（如 `param`），在需要时直接赋值，虽然全局变量提供了一定的便利性，但其缺点是返回按钮无法保存参数，而查询字符串则能保留上一个页面的参数，为了解决全局变量无法保存参数的问题，我们对代码进行了修改，使其能够在 `hashchange` 事件触发时，根据URL自动定位页面参数。

2、在Apifox中准备一份接口文档，Apifox支持导入多种数据源格式，您可以将项目的文档导入到Apifox中，或者直接在软件内部创建新的项目接口文档，我为大家准备了一份包含大屏项目各个图表接口Mock数据的文档，只需导入到Apifox即可使用。

3、连接远程服务器有多种方法，Xshell是其中一种常用的工具，您可以从Xshell的 *** 网站下载免费版本，填写姓名和邮箱后即可获得下载链接。

前端跨域CORS配置指南：Vue环境下解决所有问题

1、在Vue项目中配置跨域，如果后端提供的接口为 `https://stg-pteppp.leanapp.cn/h5/jsconfig`，前端在本地开发时需要调用该接口，解决方案是在webpack中配置 `proxy`，如下所示，`target` 是您要代理的域名，必须包含 `http://` 或 `https://`。

2、解决跨域问题的方法有多种，一种是在特定接口的响应头中设置 `Access-Control-Allow-Origin: *`，允许所有来源访问；另一种是修改fetch请求，使用 `mode: 'no-cors'` 来关闭CORS验证；还可以利用Spring框架的 `@CrossOrigin` 注解，为需要跨域的方法或类添加此注解，简化开发流程。

3、解决跨域问题主要有两种方法：CORS（跨域资源共享）和JSONP，CORS是W3C标准，允许浏览器向跨域服务器发起XMLHttpRequest请求，打破了AJAX的同源限制，要使用CORS，服务器和浏览器都需要支持，并遵循特定的规则，如服务器允许特定的Origin（来源），简单请求和非简单请求在头信息处理上有不同的方式。

WebpackDevServer配置实战操作步骤

1、使用 `proxy` 配置项解决跨域问题，通过 `http-proxy-middleware` 转发请求，并更改请求头中的 `host` 以指向目标服务，配置步骤包括：安装 `webpack-dev-server`，在 `webpack.config.js` 中添加 `devServer` 配置，以及在 `package.json` 中配置启动命令，通过这些步骤，您将掌握 `webpack-dev-server` 的核心概念和实际应用。

2、配置开发环境的 `webpack.dev.config.ts` 文件，引入所需的路径、工具和插件，定义开发模式输出配置，如公共路径、文件名规则等，配置入口文件，包括Babel、ESModule、CSS和静态资源的处理规则，设置解析规则，处理文件扩展名，并添加JS压缩插件以优化配置。

3、确保安装最新版本的依赖，包括webpack 7、webpack-cli 2和webpack-dev-server x，在 `package.json` 的 `scripts` 部分，添加启动命令 `"serve"`，以简化启动服务的步骤，在 `webpack.config.js` 文件中，新增 `devServer` 节点进行详细配置。

4、`publicPath` 用于指定打包文件的访问路径，在 `webpack devServer` 中，默认值为 `'/'`，意味着打包文件可以通过 `'http://localhost:8080/bundle.js'` 访问。

5、在浏览器中输入 `'http://localhost:8080/src'` 查看效果，您可以通过配置文件修改端口号，在 `src` 文件夹下创建 `css` 文件夹并添加 `index.css`，设置网页的主体背景色，在 `main.js` 中引用该CSS文件，并使用 `npm run dev` 命令启动 `webpack-dev-server`，为了解决webpack无法解析CSS文件的问题，需要引入 `style-loader` 和 `css-loader`。

6、`static` 用于提供静态资源，`hot` 则开启模块热替换，允许在运行时更新模块而无需刷新整个页面；`proxy` 则用于解决跨域问题，通过本地代理服务器转发请求到目标服务器，使用 `webpack-dev-server` 需要安装它，更新webpack配置文件，并在 `package.json` 中添加启动命令，通过这些步骤，您将完全掌握这个工具的使用方法。