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. 代理服务器