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