phpcms 网站根目录,艺点意创官网,山河建设集团有限公司的网站,中国著名摄影网站vue代理问题
场景:前后端分离项目问题,在前端中请求接口,返回数据这个过程,但是在这个过程中,前端会有两个环境,一个是开发环境,一个是生产环境.
在开发环境中请求接口可能会遇到跨域问题,比如请求的端口是3000,当前端口是8080,这时候就会遇到跨域问题,或者ip不同,也会存在跨…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模式之下,以上操作,只能操作部分内容.对于这个问题要如何解决呢? 告诉后端,做一个重定向就好了.
