Vue3+vite搭建项目全局引入axios，并且接解决axios跨域问题_vite 引入axios

全局引入axios
在main.js里面引入

import { createApp } from 'vue'
import App from './App.vue'
// import router from './router'
import axios from 'axios'
const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

1
2
3
4
5
6
7
8

在你的xxxx.vue里面使用：

<script>
import { getCurrentInstance } from "vue";
export default {
  setup() {
    const { proxy } = getCurrentInstance();
    proxy.$http
      .get("/api/你的数据接口")
      .then((response) => {
        console.log(response);
      });
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

解决跨域：
在根目录vite.config.js里面：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0',
    port: 3000,
    proxy: {
      '/api': {
        target: '你接口的域名',	//实际请求地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19