vue开发环境配置的跨域方法步骤

本文旨在实现的是，用vue-cli构建的项目在开发过程中配置为跨域，上线后无需任何修改即可访问界面。

生产：产品的生产环境

发展：发展环境

1.开发环境设置跨域使用工具：

Vue-cli自己的配置配置目录/config/index . js

//自复制并粘贴proxy table : { '/API ' : { target : ' http://10 . 1 . 63 . 26336019080/'，//后台API change origin in 3360 true，//跨域//secure3360true，path rewrite : { '/API ' : ' '//需要重写。}}}注意：以上配置仅在生产环境下有效，打包后将不起作用。

有一个问题。您的接口以/API开头。打包并部署到服务器后，需要移除/API才能正常访问后台界面。怎么解决？

2.跨域生产环境设置

使用axios中文文档地址的思考

解决方案如下：

首先，axios有一个baseURL属性。在配置了baseURL之后，当您访问该界面时，您将自动带来它

假设您设置了一个开发环境，地址是http://localhost:8080//示例1。未设置baseURL时，axios.get('/user') //访问/user相当于访问http://localhost :8080/user///示例2 axios . base URL='/API ' axios . get('/user ')//访问/user相当于访问http://localhost 33608080/API/user//示例3 axios . base URL=' 3359 sbsb.com ' axios . get('/user ')//访问/user相当于访问

//判断是否是生产环境var is pro=process . env . node _ env==' production '/process . env . node _ env用于区分是生产环境还是开发环境。//配置不同的base URL module . exports={ base URL 3360 is pro？http://sbsb.com :8888/' : '/API ' } process . env . node _ env用于区分生产环境和开发环境。该值由webpack设置

动手操作

假设后台api的rul是http://sbb.com :8888/首先，在/config目录中创建新文件，我称之为api.config.js

编写以下代码

//判断是否是生产环境var ispro=process . env . node _ env==' production '/process . env . node _ env用于区分是生产环境还是开发环境//根据不同的环境导出不同的baseerlmodules . exports={ baseerls 3360 ispro？http://sbsb.com :8888/' : '/API ' }然后，在main.js中介绍axios和刚才的文件

//main.js从' vue '导入vue从' axios '导入axios '从'导入API配置'.axios的apiconfig.baseurl//other配置.完成此配置后，当打包并部署到服务器时，不再需要手动删除/API

如果在配置过程中出现问题，请自行调试，查看访问的url是否正确

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。