vue 简单了解跨域

一、在vue.config.js 写入

module.exports={
            
    / 部署生产环境和开发环境下的URL。
    // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
    // 例如 https://www.wuhu.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路 
    // 径。例如，如果你的应用被部署在 https://www.wuhu.vip/admin/，则设置 baseUrl 为 /admin/。
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
    // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致） 
   （默认dist）
    outputDir: 'dist',
    devServer: {
        host: '0.0.0.0',
        port: port,
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: `http://000.000.0.00:0000`,//服务器地址
                changeOrigin: true
                // pathRewrite: {
                //   ['^' + process.env.VUE_APP_BASE_API]: ''
                // }
            }
        },
        disableHostCheck: true
    },
}

其中[process.env.VUE_APP_BASE_API]指向为.env.development 如果没有请在vue.config.js同级创建此文件

 二、在.env.development文件中放入这段代码 其中VUE_APP_BASE_API  就是我们vue.config.js中[process.env.VUE_APP_BASE_API]（此环境为开发环境）

# 开发环境配置
ENV = 'development'

NODE_ENV = development

# 开发环境
VUE_APP_BASE_API = ''

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

三、新建一个文件夹名字为utils（src文件夹下），再新建文件request.js 

import axios from 'axios'


axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 100000
})

export default service

我们通过axios.create里面的baseURL 给他赋值我们process.env.VUE_APP_BASE_API，我们通过.env.development文件中拿到的  这样他走到vue.config.js中识别到两个相等他就会将我们targer的服务器地址替换为我们调接口的前缀 

四、新建一个api文件夹 里面写上接口文件比如login.js(登录接口文件)

       在文件中引入request

import request from '@/utils/request'

export function getInfo(data) {
  return request({
    url: '接口',
    method: 'post',
    data
  })
}

这样我们在调用这个gitInfo的时候 就会去实现跨域

五、码云中有详细代码 并且token已经封装 地址 维生素B/坤坤移动