vue代理问题

vue代理问题

场景:前后端分离项目问题,在前端中请求接口,返回数据这个过程,但是在这个过程中,前端会有两个环境,一个是开发环境,一个是生产环境.

在开发环境中请求接口可能会遇到跨域问题,比如请求的端口是3000,当前端口是8080,这时候就会遇到跨域问题,或者ip不同,也会存在跨域问题,解决跨域问题一般有两种,一种是前端解决,一种是后端解决,任意一方解决这个问题,另一方就不用操作了

前端如何解决跨域问题呢?

在通过vue-cli创建的vue项目中,解决跨域问题是通过代理的设置.

场景:

前端项目:localhost:8080 后台项目:localhost:3000

现在我们在前台请求后台接口的时候就产生跨域问题了, 这时候如果你将后端这个localhost:3000直接放在接口请求中,一定会报错. 这就是遇到了跨域问题.

这时候可以在我们的vue项目中建一个vue.config.js文件,在这个文件中做一个服务器代理

module.exports = {devServer:{proxy:'http://localhost:3000'}
}

在请求中就不需要加 localhost:3000,这时候在开发环境中就可以正常请求接口内容了.

但是现在如果我这样操作之后,对项目进行打包,其实也是不对的,打包之后的项目,在控制台中对于刚刚代理的地址会进行报错:

会将代理内容变成==>file://home

如何解决file://home这个问题:

前提:在这里需要明白两个问题:模式和环境变量的问题

模式有两种:history和hash

当下场景:在hash模式下,当我们在config中完成代理,以及默认路径之后,打包之后的项目是正常呈现的,但是在控制台依旧会有file://home

环境有两种:开发环境.env.development文件和生产环境env.production文件 <===存在与项目的根目录下

解决办法:创建两个文件

.env.development:

VUE_APP_TITLE = '项目名称'
VUE_APP_ENV = 'dev'
VUE_APP_BASE_API = 'http://localhost:300/'

env.production:

VUE_APP_TITLE = '项目名称'
VUE_APP_ENV = 'pro'
VUE_APP_BASE_API = 'http://localhost:300/'

补充:

1.在获取开发环境或者生产环境的内容时:通过 process.env.VUE_APP_BASE_API

新建这两个文件之后,项目会自动识别,当前是生产环境还是开发环境,当我生产环境的时候,process.env.VUE_APP_BASE_API取到的就是.env.production的内容,当在开发环境中,渠道就是.env.development文件的内容

2.axios的二次封装:

首先 :

npm install axios

然后:创建axios封装模块

在src目录下,创建一个utils文件夹,然后在其中创建一个http.js文件,用来进行axios的二次封装

import axios from 'axios';
export default{$axios( options ){let apiUrl = nullif( process.env.VUE_APP_BASE_API === 'dev' ){apiUrl = options.url}else{apiUrl = process.env.VUE_APP_BASE_API + options.url}return axios({url:optins.url})}
}

完成这些操作之后,后端在进行一个跨域,对于在开发环境和生产环境下,file:home就全部都解决了

但是对于在项目中代理问题还有很多.

例如:在打包项目之后,项目出现了空白页,如何解决?为什么出现空白页?

补充: 路由模式:history和hash模式

在history模式之下,全部默认操作下,进行打包项目,打包完成之后,打开项目之后,啥也没有,右击查看源代码,会发现引入路径,是这样写的:

这个路径引入是不对的 ,这就是导致项目是空白页的根本原因,解决办法是将其变成相对路径 ==> ./

如何去修改这个路径呢?

在vue-cli中有一个关于这样的内容:

要想解决这个问题,解决办法如下:

在vue.config.js中我们添加

module.exports = {publicPath:'./'
}

再次打包之后,引入的路径是对了,也出现了部分内容,解决了部分内容.

这时候就得说一下关于路由模式的问题了:history和hash模式.

如果是在hash模式之下呢,以上的这些操作之后,项目打包之后,已经完全正常了.

但是在history模式之下,以上操作,只能操作部分内容.对于这个问题要如何解决呢? 告诉后端,做一个重定向就好了.