vue3 + ts 使用axios的指向問題及跨域問題
阿新 • • 發佈:2021-12-30
當 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': '' //選擇忽略攔截器裡面的單詞 } } } } }