vue 多个代理一起用 vue cli 4.5

vue.config.js

由此可以看出你每次请求时候都会在根路径下添加 /api ,所以你的请求是get('/test').then() 的时候你走的是第二个代理，当你的请求get('/xiao/test').then()走的是第一个代理，当你的数据不合适的时候可以自己写一个json来测试

module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: {
      '/api/xiao': {
        target: 'https://www.fastmock.site/mock/a14f30a835adba71be928253ab4aedaf/xxx', // 目标服务器 host
        changeOrigin: true, //  控制请求头中host的值  true服务器地址  false自己服务器地址
        pathRewrite: { // 对请求路径进行重定向以匹配到正确的请求地址
          '/api/xiao': ''
        }
      },
      '/api': {
        target: 'http://mall-pre.xxx.cn', // 目标服务器 host
        changeOrigin: true, //  控制请求头中的URL显示为localhost:8080 ,false 显示为代理路径
        pathRewrite: { // 对请求路径进行重定向以匹配到正确的请求地址
          '^/api': ''
        }
      }
    }
  }
}

// productionSourceMap: true,  是否生成xxmap.js  true 生成  false 不生成
//   chainWebpack: config => {
//     config.plugins.deldte('prefetch')  删除预加载
// lintOnsave:false  关闭eslint 检测

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

axios.defaults.baseURL = '/api'
axios.defaults.timeout = 8000

axios.interceptors.response.use(response => {
  const res = response.data
  if (res.status === 0) {
    return res.data
  } else if (res.status === 10) {
    return Promise.reject(res)
  } else {
    alert(res.msg)
    return Promise.reject(res)
  }
})
const app = createApp(App)
app.use(store)
app.use(router)

app.config.globalProperties.axios = axios // 创建全局参数 this.axios  不能在Setup 中调用
app.mount('#app')

注意：

如果你要代理的地址是   ‘http://cpc.cn:707’

你要在baseUrl = '/api'   任意字段

那么你访问的地址就是

axios.get('/xxx').then(res => {})

你访问的实际地址就是 http://cpc.cn:707/api /xxx  api取决你的配置

---

vue cli 多个版本的切换

如果你全局安全了vue cli     ---------- npm i -g @vue/cli         查看版本----vue  -V       5.0.4

创建项目 vue create projectvue

---

cd myvue     npm init -y    

局部安装 npm i -D @vue/cli@4.5.19         npx vue -V

创建项目  npx vue create projectvue

可以在局部多个版本切换

---

1.cors   需要后端人员在服务器返回的请求头中添加  配置

2.jsonp  script src 不受到同源策略的影响，前端，后端配合

3. 代理服务器