1. 程式人生 > 其它 >vue3 + ts 使用axios的指向問題及跨域問題

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': ''                     //選擇忽略攔截器裡面的單詞
                }
            }
        }
    }
}