Vue2跨域配置打包上线流程

最新推荐文章于 2025-05-08 15:43:18 发布

一詀

最新推荐文章于 2025-05-08 15:43:18 发布

阅读量1.9k

点赞数 35

文章标签：前端

本文链接：https://blog.youkuaiyun.com/2301_77577184/article/details/142206327

版权

Vue2跨域配置打包上线流程

一、Vue项目配置跨域问题

(1)跨域的概念

后端开发的时候，采用微服务来进行开发。

每个开发者都有自己的项目，最后整合在一起进行通信。微服务开发

前端还需要考虑配置跨域问题

跨域：因为浏览器的同源策略（安全策略），导致我们无法在浏览器中访问（协议、端口、ip）不同的服务器

xml

代码解读

复制代码

<html> <link href="./index.css"> <img src="./index.js"> <script> const baseURL = http://127.0.0.1:3000 const res = await axios.get(baseURL+"/users/find") </script> </html>

获取css代码：http://127.0.0.1:8080/index.css

获取js代码：http://127.0.0.1:8080/index.js

获取用户数据：http://127.0.0.1:3000/users/find

(2)后端配置跨域的思路

后端配置跨域来解决我们前端报错的问题，也是一种主流方案。

php

代码解读

复制代码

var allowCrossDomain = function (req, res, next) { // 设置允许跨域访问的请求源（* 表示接受任意域名的请求） res.header("Access-Control-Allow-Origin", "*"); // 设置允许跨域访问的请求头 res.header("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type,Accept,Authorization"); // 设置允许跨域访问的请求类型 res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); // 同意 cookie 发送到服务器（如果要发送cookie，Access-Control-Allow-Origin 不能设置为星号） res.header('Access-Control-Allow-Credentials', 'true'); next(); }; app.use(allowCrossDomain)

后端跨域，前端浏览器就可以直接访问

原理：

前端浏览器发现跨服务器获取数据的时候。
浏览器先默认发送一个请求到后端，请求类型options
当浏览器通过options请求获取到响应一些服务器资源后，
继续发送你们自己的请求到后端。
后端就可以返回数据到前端

总结：

后端配置跨域，浏览器默认发送两次请求。其中一次options
options请求目的获取后端允许跨域配置。options请求成功后，服务器响应头会将你的配置传递浏览器
浏览器接受这些信息，继续发送请求给后端，不存在跨域问题

跨域问题只存在于浏览器。H5、WEB

小程序、app不存在跨域问题

前端和后端通信

(3)前端配置跨域

服务器和服务器之间不存在跨域。

需要配置代理服务器。前端服务器中在配置一个代理服务器，将指定的请求通过代理服务器转发给后端服务器获取数据

(1)在vue项目跟目录创建vue.config.js文件

这个文件是vue内置的一个webpack配置文件，你写的配置可以覆盖默认webpack

ruby

代码解读

复制代码

module.exports = { devServer:{ port:8888, //配置代理服务器，webpack内置的 proxy:{ //当检测到路径包含了/api 进入代理服务器 //http://127.0.0.1:4001/api/usersAD/getSearch "/api":{ target:"http://127.0.0.1:4001", changeOrigin:true, //表达的意思就是将路径中/api，替换成空字符串 pathRewrite:{ '^/api':'' } }, } } }

(2)代码中修改baseURL

xml

代码解读

复制代码

<template> <div> <h2>注册页面</h2> <button @click="fetchData">发送请求</button> </div> </template> <script> import axios from "axios" export default { created(){ console.log("注册组件"); }, methods:{ async fetchData(){ axios.defaults.baseURL = "/api" const res = await axios({ url:"/usersAD/getSearch", method:"POST", data:{} }) console.log(res); } } } </script>

当前端访问地址里面包含了/api的时候，代表先默认访问前端服务器。

前端服务器检测路径有/api进入代理服务器。

代理服务器转发请求指定服务器

前端请求只会发送一次。不存在options验证的过程

代理服务器是webpack提供的。

一旦打包后，你的代码静态资源，没有任何webpack

只限于开发环境，打包后正式的前端服务器运行，上面配置都无效

二、配置环境变量

Vue-CLI提供的配置

访问地址为：cli.vuejs.org/zh/guide/mo…

概念：脚手架工具提供了在不同的环境下，配置不同的参数，不同命令来进行项目加载的时候，读取不同文件

你们很多配置可以不用硬编码在代码中

在项目跟目录下面可以配置.env.[mode]

(1)环境配置文件

项目中情况：

.env:代表了当前项目环境配置
.env.development:开发环境配置
.env.production:配置生产环境
.env.test:配置测试环境

.env.development代码如下

ini

代码解读

复制代码

VUE_APP_PROT = 8889 VUE_APP_BASE_URL = "/api" VUE_APP_TITLE = "woniu" VUE_APP_SERVER_PATH = "http://127.0.0.1:4001"

环境变量的key必须是VUE_APP开头的。

.env.production 代码如下

ini

代码解读

复制代码

VUE_APP_PROT = 9999 VUE_APP_BASE_URL = "/myapis" VUE_APP_TITLE = "woniu"

(2)在封装请求的时候，将baseURL替换为环境变量

javascript

代码解读

复制代码

methods:{ async fetchData(){ //任何一个地方，获取系统环境变量 //Nodejs提供一个全局变量 process // console.log(process.env); axios.defaults.baseURL = process.env.VUE_APP_BASE_URL const res = await axios({ url:"/usersAD/getSearch", method:"POST", data:{} }) console.log(res); } }

在Node环境下面提供的全局变量process，可以直接使用

(3)在vue.config.js文件配置代理内容

arduino

代码解读

复制代码

const repacePath = "^"+process.env.VUE_APP_BASE_URL module.exports = { devServer:{ port:Number(process.env.VUE_APP_PROT), //配置代理服务器，webpack内置的 proxy:{ //当检测到路径包含了/api 进入代理服务器 //http://127.0.0.1:4001/api/usersAD/getSearch [process.env.VUE_APP_BASE_URL]:{ target: process.env.VUE_APP_SERVER_PATH, changeOrigin:true, //表达的意思就是将路径中/api，替换成空字符串 pathRewrite:{ [repacePath]:'' } }, } } }

根据不同的环境，读取不同配置，进行加载

如果是生产环境npm run build 读取的production配置

三、打包部署

(1)nginx服务器

是一个非常优秀的静态资源服务器。

前端提供的静态资源，nginx在处理静态资源非常高效，

处理并发的能力非常好

nginx并发能达到5万，只是一台服务器。

tomcat服务器，500并发到性能瓶颈。

下载nginx服务器，在你的电脑中启动。就可以访问

conf：里面存放nginx的配置

html：存放的打包静态资源

nginx.exe服务器启动运行文件

(2)前端项目配置好生产环境打包

arduino

代码解读

复制代码

npm run build

(3)将dist文件夹里面的资源拷贝

将dist里面资源拷贝到nginx服务器html文件夹下面

(4)启动服务器

代码解读

复制代码

nginx.exe

你可以在系统进程里面可以看到nginx

(5)浏览器默认访问80端口

makefile

代码解读

复制代码

127.0.0.1:80

(2)配置nginx的反向代理

前端如果要访问接口，

第一种方式：直接访问后端服务器地址，后端要配置跨域

第二种方式：前端先访问nginx，检测路径有指定符号，通过nginx代理，转发给后端服务器。

在nginx的conf文件夹下面找到nginx.conf

ini

代码解读

复制代码

server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; index index.html index.htm; try_files $uri /index.html; } location /apis/ { rewrite ^.+apis/?(.*)$ /$1 break; proxy_pass http://127.0.0.1:4001; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } ... 省略后面代码 }

启动项目就可以进行访问了。