Vue——搭建项目架构【开发项目用，环境变量，跨域】

原创已于 2025-06-06 23:50:30 修改 · 555 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #架构 #前端

于 2025-06-06 23:49:21 首次发布

VUE疑难杂症专栏收录该内容

45 篇文章

订阅专栏

第一步：确定是否按装了Node moodles，若没按则在终端安装：
npm install

第二步：配置路由

======================================================================================================================================================

Vue环境变量配置和跨域代理的问题

在Vue.js项目中，环境变量的配置和使用是一个重要的环节，尤其是在不同环境下（如开发和生产）需要使用不同的API地址。以下是详细的步骤说明，解释了如何获取和使用VUE_APP_API的值。

第一步：定义环境变量

首先，需要为不同的环境创建相应的.env文件，并在文件中定义环境变量。
在这里插入图片描述
开发环境：创建.env.development文件，内容如下：

生产环境：创建.env.production文件，内容如下

确保变量名以VUE_APP_开头，这样Vue CLI才能识别并将其嵌入到构建中。

步骤 2：创建配置文件

接下来，创建一个config.js文件，用于集中管理配置信息。这个文件通常位于项目根目录下或src目录中。
在这里插入图片描述
在这个配置文件中，baseApi和token都是从环境变量中获取的值。

步骤 3：在应用中使用配置文件

在项目的入口文件（如main.js或app.js）中导入config.js文件，将config.js文件全局挂载配置
在这里插入图片描述
这样，应用的各个部分就可以通过this.$config访问到配置信息

步骤 4：根据环境加载不同的.env文件

Vue CLI会根据当前运行的环境自动加载对应的.env文件。在开发环境中，运行以下命令时会加载.env.development文件：

npm run serve

而在生产环境中，运行以下命令时会加载.env.production文件：

npm run build

步骤 5：处理API请求

在组件或服务中，使用baseApi进行API请求。
在这里插入图片描述
这样，根据当前的运行环境，baseApi会自动使用对应的API地址。

步骤 6：配置开发环境的代理

在开发环境中，如果API服务器运行在不同的端口或域名上，可以通过配置Vue CLI的代理来解决跨域问题。在vue.config.js文件中添加代理配置：

在这里插入图片描述
这样，在开发环境中，/api路径会被代理到实际的API服务器，避免跨域问题

（1）跨域代理的背景
在前端开发中，前端和后端通常会运行在不同的端口或域名上。例如，前端可能在 localhost:8080 运行，而后端 API 可能在 localhost:3000 运行。当前端向后端发送请求时，浏览器会阻止这些跨域请求，以防止安全问题。
所以，为了使前端能够向后端发送请求，需要解决跨域问题。跨域代理配置（vue.config.js）是一个很好的解决方案。通过配置代理，前端可以将请求转发到后端服务器，从而避免跨域问题。

（2）为什么需要跨域代理配置？

解决跨域问题：在开发和测试阶段，前端应用和后端 API 可能运行在不同的端口或域上。通过配置代理，前端可以将请求转发到后端服务器，从而避免浏览器的跨域限制。
统一 API 地址管理：在不同环境下（如开发、测试、生产），后端 API 的地址可能不同。通过代理配置，可以在前端代码中统一管理这些地址，避免硬编码，提高代码的可维护性和灵活性。
简化开发流程：代理配置允许前端开发者在本地开发环境中使用与生产环境相同的 API 地址，减少环境切换带来的配置复杂性。

（3）跨域代理配置的作用

跨域代理配置（vue.config.js）的作用主要是将前端应用的 API 请求代理到实际的后端服务器。具体来说，当前端应用发送一个 API 请求时，代理服务器会拦截该请求，并将其转发到配置的目标服务器（target）。目标服务器处理完请求后，将响应返回给代理服务器，再由代理服务器将响应返回给前端应用。

（4）配置参数详解
在 Vue 项目中，跨域代理配置通常在 vue.config.js 文件中进行，如下所示：
在这里插入图片描述

target：目标服务器的地址，即后端 API 服务器的 URL。例如，http://localhost:3000 表示后端 API 服务器运行在本地的 3000 端口。
changeOrigin：设置为 true 时，代理服务器会修改请求头中的 Host 字段，使其指向目标服务器。这有助于防止目标服务器根据 Host 头判断请求来源，从而避免某些安全限制。
pathRewrite：路径重写规则，用于修改请求路径。例如，‘^/api’: ‘’ 表示将请求路径中的 /api 前缀去掉，直接转发到目标服务器的根路径。这在目标服务器不使用 /api 路径时非常有用。

（5）跨域代理配置的工作流程

1. 前端请求：前端应用通过 axios 或 fetch 发送一个 API 请求，
例如 axios.get('/api/users')。

2. 代理拦截：开发服务器（如 webpack-dev-server）拦截到以 /api 开头的请求。

3. 请求转发：代理服务器将请求路径 /api/users 转发到目标服务器的 /users 路径
（假设 pathRewrite 配置为去掉 /api 前缀）。

4. 目标服务器处理：目标服务器处理请求，并返回响应数据。

5. 响应返回：代理服务器将目标服务器的响应返回给前端应用。

（6）与环境变量的协同工作
在 Vue 项目中，环境变量通常用于管理不同环境下的配置，如 API 地址、密钥等。通过在 .env 文件中定义环境变量，并在 config.js 文件中读取这些变量，可以在不同环境下动态地配置代理目标。

例如，可以在 .env.development 文件中定义：

VUE_APP_API = http://localhost:3000

然后在 config.js 中读取：

export default {
  baseApi: process.env.VUE_APP_API,
  // 其他配置...
}

最后，在 vue.config.js 中使用环境变量配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: process.env.VUE_APP_API,
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

这样，当切换到生产环境时，只需修改 .env.production 文件中的 VUE_APP_API 值，代理目标会自动更新，无需修改 vue.config.js 文件。

总结
跨域代理配置在 Vue 项目中是解决跨域问题、统一 API 管理和简化开发流程的重要手段。通过合理配置代理服务器，可以有效地将前端请求转发到后端 API 服务器，确保应用在不同环境下都能正常运行。同时，结合环境变量的使用，可以进一步提高配置的灵活性和可维护性。理解这些配置的原理和作用，将有助于更好地管理和优化 Vue 项目中的 API 请求和环境配置。

======================================================================================================================================================

ES6语法转成ES5:要先安装 :

npm install --save babel -polyfill

import " babel-polyfill ": ES6语法转成ES5兼容IE;
导入babel-polyfill需要先安装 :npm install --save babel -polyfill

”是用来支持ES6+特性在旧版浏览器如IE中的运行。Babel默认只转换语法，比如箭头函数、类，但新的API如Promise、Array.from等需要polyfill来添加。用户可能在使用ES6特性时遇到IE不兼容的问题，所以引入这个。

import "url-search-params-polyfill:，
这里是为了让IE支持URLSearchParams接口。URLSearchParams用于处理URL的查询参数，现代浏览器支持，但IE不兼容。用户可能在代码中使用了new URLSearchParams()，所以需要这个polyfill。

main.js文件

在这里插入图片描述