这个搭建起一个vue项目
https://www.cnblogs.com/hechunfeng/p/17249626.html
1. 因为使用的是vite,所以配置上如下,看server,
env.VITE_HTTPURL是里面的开放环境或者生成环境的变量
import { defineConfig,loadEnv} from 'vite' //Install node types before calling below import import {fileURLToPath} from "url"; import path from 'path'; import vue from '@vitejs/plugin-vue' import AutoImport from "unplugin-auto-import/vite"; // https://vitejs.dev/config/ export default defineConfig(({ mode })=>{ const env = loadEnv(mode, __dirname); return { plugins: [ vue(), AutoImport({ //Targets(file extensions) include:[ /\.[tj]sx?$/, //Regex which says t or j followed by sx. tsx jsx ,? next to x says it can happen zero or one time js ,ts /\.vue$/, // $ at the end says it ends with vue ], //globals (libraries) imports:["vue","vue-router","pinia"], //other settings/files/dirs to import dts:true,//Autoimport all the files that ends with d.t //Autoimport inside vue template vueTemplate:true, eslintrc:{enabled:true} }) ], base: env.VITE_MODE === 'production' ? './' : '/', resolve:{ alias:{ //Two methods available //Method 1 : using fireURLtoPath(keep adding other paths as needed) "@":fileURLToPath(new URL("./src",import.meta.url)), //Method 2 : using path "@components":path.resolve(__dirname,"src/components"), "@pages":path.resolve(__dirname,"src/pages"), "@layout":path.resolve(__dirname,"src/layout"), "@tests":path.resolve(__dirname,"src/tests"), "@assets":path.resolve(__dirname,"src/assets"), "@api":path.resolve(__dirname,"src/api"), "@stores":path.resolve(__dirname,"src/stores"), "@utils":path.resolve(__dirname,"src/utils"), "@routers":path.resolve(__dirname,"src/routers"), } }, // 配置 // pathRewrite:{'^/api':""} 跨域配置 http://192.168.1.133/api/ http://192.168.1.253:8081/api/ server:{ proxy:{ "/api":{ target:env.VITE_HTTPURL, changeOrigin:true, rewrite:(path)=>path.replace(/^\/api/,"") } } } } })
axios,我在utils下的request文件下配置
import axios from 'axios' import router from '@/routers/router' const request = axios.create({ baseURL:'/api', timeout:600000, headers:{'Content-Type':'application/json;charset=utf-8','Authorization':`Bearer '+${localStorage.getItem('userToken_ERP')}`} }) // 请求拦截器,在每个请求前添加token request.interceptors.request.use( (config)=>{ const token = localStorage.getItem('userToken_ERP') if(token){ if(config && config.headers){ config.headers.Authorization=`Bearer ${token}`; } }else{ } return config; }, (error)=>{ return Promise.reject(error); } ) // 响应拦截器,如果请求返回401,说明token失效或未授权,则跳转到登录页 request.interceptors.response.use( (response)=>{ return response }, (error)=>{ const code =error.response ? error.response.status : null if(code === 401){ console.log(error.response.status,'401') router.push("/login") } return Promise.reject(error) } ) export default request
然后再新建api文件夹下的,再使用
import request from "@/utils/request"; /** * 获取客户信息 */ function getCustomerInfoList(data:object){ return request.post('customer_index',data) }