vue开发环境配置跨域，一步到位

shmily 发布于2019-08-23 14:44 / 901人阅读

摘要：本文要实现的是使用搭建的项目在开发时配置跨域，上线后不做任何任何修改，接口也可以访问阅读时间需要三分钟产品生产环境开发开发环境开发环境设置跨域使用工具自带的配置配置目录自行复制黏贴后台是否跨域需要的注意以上配置只有在生产环境下有效，你打

本文要实现的是：使用vue-cli搭建的项目在开发时配置跨域，上线后不做任何任何修改，接口也可以访问

阅读时间需要三分钟

production：产品生产环境

development：开发开发环境

1.开发环境设置跨域

使用工具：vue-cli自带的配置

配置目录 /config/index.js

//自行复制黏贴
proxyTable: {
  "/apis":{
    target: "http://10.1.63.26:19080/",  // 后台api
    changeOrigin: true,  //是否跨域
    // secure: true,
    pathRewrite: {
      "^/apis": ""   //需要rewrite的,
    }
  }
}

注意：以上配置只有在生产环境下有效，你打包之后就不起作用了

这样就存在一个问题，你的接口都是/apis开头的，打包之后部署到服务器要去除/apis,才能正常访问后台接口，如何解决呢？

2.生产环境设置跨域

使用工具 axios 中文文档地址

思路

解决的思路是这样的：

首先，axios的默认实例有一个baseURL的属性，配置了baseURL之后，你访问接口时就会自动带上

假设你vue-cli起了一个开发环境，地址为http://localhost:8080
//例1 当不设置baseURL时
axios.get("/user")  //访问/user相当于访问 http://localhost:8080/user

//例2 
axios.defaults.baseURL="/apis"
axios.get("/user")  //访问/user就相当于访问 http://localhost:8080/apis/user

//例3
axios.defaults.baseURL="https://sbsb.com"
axios.get("/user")  //访问/user就相当于访问 https://sbsb.com/user

//例4
axios.defaults.baseURL="https://sbsb.com/apis"
axios.get("/user")  //访问/user就相当于访问 https://sbsb.com/apis/user

然后我们要根据现在的环境是开发环境还是生产环境，配置不同的baseURL

//判断是否是生产环境
var isPro = process.env.NODE_ENV === "production" //process.env.NODE_ENV用于区分是生产环境还是开发环境
//配置不同的baseURL
module.exports = {
    baseURL: isPro ? "http://sbsb.com:8888/" : "/apis"
}

process.env.NODE_ENV用于区分是生产环境还是开发环境，这个值是webpack设置的

动手操作

假设后台api的rul是http://sbsb.com:8888/

首先在/config目录下新建一个文件,我这里叫api.config.js
写入以下代码

//判断是否是生产环境
var isPro = process.env.NODE_ENV === "production" //process.env.NODE_ENV用于区分是生产环境还是开发环境
//根据环境不同导出不同的baseURL
module.exports = {
    baseURL: isPro ? "http://sbsb.com:8888/" : "/apis"
}

然后，在main.js中引入axios和刚才那个文件

//main.js
import Vue from "vue"
import axios from "axios"
import apiConfig from "../config/api.config.js"
axios.defaults.baseURL=apiConfig.baseURL
//axios的其他配置...

这样配置之后，打包部署到服务器上也不用再手工去除/apis

如果配置过程中出现了问题，自己调试，看看访问的url正不正确

GPU云服务器云服务器开发环境配置 python开发环境配置 app开发环境配置 php开发环境配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101055.html

Nginx

摘要：此外，其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的，第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机（启用网卡二并使用桥接模式）:A服务器：192.168.0.103 主B服务器：192.168.0.104 主（备）前端工程师学习 Nginx ...

syoya 2019-07-25 14:06 评论0 收藏0
vue开发微信商城项目总结之三--根据不同的开发环境做配置

摘要：项目是基于搭建，项目分为开发环境，测试环境，预生产环境，生产环境，其中开发环境和测试环境调用同一个接口，开发环境调用服务器端的测试接口会跨域，以上需求就引发了一些问题，问题一测试环境包括开发环境，并且开发环境跨域，预生产环境，生产环境，有项目是基于vue-cli搭建，项目分为开发环境，测试环境，预生产环境，生产环境，其中开发环境和测试环境调用同一个接口，开发环境调用服务器端的测试接口...

Magicer 2019-08-22 11:10 评论0 收藏0
vue-cli 3.x配置跨域代理

摘要：需求上是我们只需要在开发环境配置跨域代理，所以我们可以在开发环境的配置上加上能够代理上的环境变量即可。修改的配置将改为这里依然是采用的来做的代理配置，一些自定义配置可以移步到官网去进行参考。写在前面 vue-cli 3.x 的beta版本已经发布了一段时间，很早就像体验一番一直找不到时间。这些日子刚好有空就想着依照网上的一些例子练下手，刚一上手就踩到坑了。3.x 版本对整个项目的构建...

weakish 2019-08-22 16:30 评论0 收藏0
vue开发项目完全指南

摘要：有两种方法，一种是在开发环境中设置通过的，另一种是在服务器上修改的配置设置。这样我们以后使用访问接口就可以不加了，打包后访问也不用手动去除统一管理在项目开发过程中，会涉及到很多接口的处理，当项目足够大时，就需要统一管理接口。这篇文章总结了vue项目的所遇到的问题，包括跨域、用户认证、接口统一管理、路由配置、兼容性处理，性能优化等内容。项目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 评论0 收藏0