vue3 vite 代理

1、vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig(({ mode }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd())
  // 确保生产环境有正确的 base 配置
  const base = mode === 'production' ? '/' : '/'
  return {
    base: base,
    plugins: [
      vue(), 
      // vueDevTools(),
      VueSetupExtend()
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    server: {
      proxy: {
        [env.VITE_APP_BASE_API + '/extra']: {
          target: 'http://10.53.186.252:8003',
          changeOrigin: true,
          rewrite: (path) => path.replace(new RegExp(`^${env.VITE_APP_BASE_API}`), ''),
        },
      },
    },
     // 构建配置
     build: {
      outDir: 'dist',
      assetsDir: 'assets',
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
          }
        }
      }
    }
  }
})

2、.env.development

NODE_ENV = 'development'
VITE_APP_TITLE = 'development'
VITE_APP_BASE_API = '/dev-api'

3、.env.production

NODE_ENV = 'production'
VITE_APP_TITLE = 'production'
VITE_APP_BASE_API = '/pro-api'

4、nginx config

server { 
    listen       8202;
    server_name  localhost;
 
    charset utf-8;
 
    #access_log  logs/access.log  main;
 
    # vue
    location / {
        root   D:/project/vn_extra;
        try_files  $uri  $uri/  /index.html;
        index  index.html index.htm;
    }
 
    # java
    location /pro-api/extra {
        proxy_set_header  Host             $http_host;
        proxy_set_header  X-Real-IP        $remote_addr;
        proxy_set_header  REMOTE-HOST      $remote_addr;
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_pass        http://10.53.186.252:8003/extra;
    }
}

5、重启

nginx -s reload

 6、axios封装

import axios from 'axios' // 引入axios
import { message } from 'ant-design-vue';
// 创建axios实例
const request = axios.create({
  // 这里拿线上接口测试
  baseURL: import.meta.env.VITE_APP_BASE_API,

  headers: {
    // 请求头
    authorization: '',
    'Content-Type': 'application/json',
    // Content-Type: 'application/json'
    // 'Authorization': 'Bearer your_token' // 如果需要认证
  },
  timeout: 50000, // 超时时间
})
// 请求拦截器
request.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么 验证token之类的
    // let token = localStorage.getItem('TOKEN')
    // if (token) {
    //   config.headers.token = token
    // }
    return config // 记得一定要 返回config
  },
  (error) => {
    // if (error.message.includes('timeout')) { // 判断请求异常信息中是否含有超时timeout字符串
    //   this.$message.error('请求超时，请稍后再试')
    return Promise.reject(error) // reject这个错误信息
    // }
  },
)

// 响应拦截器
request.interceptors.response.use(
  (response) => {
    // console.log("返回的数据", response);
    // 这里拦截401错误，并重新跳入登页重新获取token
    // if (response.data.code === 0) {
    //     return response.data
    // } else if (response.data.code === 401) {
    //     // 如果是token过期，跳转至登录
    //     this.$message.error("登录已过期，请重新登录！");
    //     localStorage.removeItem('token') // 移除token，跳转至登录
    // }

    // 如果是文件下载请求，直接返回完整响应
    if (response.config.responseType === 'blob') {
      return response
    }
 
    // 原有 JSON 响应处理逻辑
    // const { code, data, message: msg } = response.data
    // if (code === 0) {
    //   return data
    // } else {
    //   message.error(msg || '请求失败')
    //   return Promise.reject(new Error(msg || '请求失败'))
    // }


    return Promise.resolve(response.data)
  },
  (error) => {
    // if (error.message.includes('timeout')) { // 判断请求异常信息中是否含有超时timeout字符串
    //   this.$message.error('请求超时，请稍后再试')
    return Promise.reject(error) // reject这个错误信息
  },
  // }
)
export default request