Vue + Vite + Axios 项目多环境以及部署前后端跨域

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// 环境变量
const env = process.env
 
// 配置API接口地址
const API_URL = env.VITE_API_URL
 
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: API_URL,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    // ...
  }
})
 
// axios 配置跨域
const axios = require('axios')
 
axios.defaults.baseURL = API_URL
axios.defaults.headers.post['Content-Type'] = 'application/json'
 
// 在 Vue 项目中使用 axios
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
 
const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

这个代码实例展示了如何在Vite项目中配置多环境变量，并且设置Vite开发服务器的代理来处理API请求。同时，它演示了如何使用axios库来发送跨域请求，并在Vue应用程序中全局配置axios实例。