vue3 + ts 使用axios的指向问题及跨域问题

当 tsconfig.json 中

"strict": true,

vue中会报错:
  所有的this后全部飘红 Property 'XXX' does not exist on type

解决方法: 改为flase

 

引入elementui 和axios

npm install element-plus --save

npm install axios

npm install vue-axios --save-dev

 

main.ts中配置如下

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App)
app.use(VueAxios)
app.config.globalProperties.$http = axios

app.use(ElementPlus)
app.use(router).mount('#app')

跨域问题:

新增vue.config.js 放在根目录下,记得重新启动项目

module.exports = {
    devServer: {                
        port: 9000,
        proxy: {                 
            '/api': {             
                target: 'http://localhost:8080/api',     //接口RestMapper(地址),或者你要写的模块的根地址
                changeOrigin: true,              //是否设置同源
                pathRewrite: {                   //路径重写
                    '/api': ''                     //选择忽略拦截器里面的单词
                }
            }
        }
    }
}

 

上一篇:物流管理系统(springboot+vue+mybatis-plus)


下一篇:botepad++软件连接