1 环境变量

端口配置

开发环境服务端口在vue.config.js中的位置

这里，process.env.port就是一个node.js服务下的环境变量

环境变量的配置文件

在项目运行的过程中，通过不同的命令，会自动加载不同的配置文件，获取不同的环境变量

注意:自定义的环境变量要以：VUE_APP开头

配置不同的请求基地址

.env.development

# 开发环境的基础地址
VUE_APP_BASE_API = 'http://xxxxx/api'
复制代码

.env.production

# 生产环境的基地址
VUE_APP_BASE_API = 'http://www.xxx.com/prod-api'  
复制代码

使用环境变量

const service = axios.create({
  // baseURL: 'http://your.address'
  baseURL: process.env.VUE_APP_BASE_API
})
复制代码

2 开发环境下的跨域问题解决方案

跨域问题

1.在A地址的时候像B地址发起请求的时候，如果两个地址间的协议、域名、端口号不全相同，则该请求是跨域的

2.跨域是非常常见的现象

3.注意:虽然请求是跨域的，但并不一定会报错，普通的图片请求，css文件请求是不会报错的

跨域请求错误条件

浏览器同源策略&&请求是ajax类型

代理转发

通过配置vue-cli请求代理解决开发环境下的跨域问题

思路：在前端服务和后端接口服务之间 架设一个中间代理服务，它的地址保持和前端服务一致

1.代理服务和前端服务之间由于协议、域名、端口三者统一不存在跨域问题，可以直接发送请求

2.代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

vue-cli解决跨域配置

只需要在vue.config.js配置文件中，加上一些配置

module.exports = {
  devServer: {
    // ...
   // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
  }
}
复制代码

然后将更改.env.development中的环境变量

完成这些后重启项目，再次测试

小结注意

1.vue-cli集成了跨域代理功能—只能在开发阶段用

2.ajax基地址baseURL必须是相对地址，不能是绝对地址

3.更改配置文件后要重启项目

努力完善 ?
复制代码