npm init vite-app 文件名 创建项目
npm i axios
npm i Element3
main.js文件
import 'element3/lib/theme-chalk/index.css' //Element3 css文件
import axios from 'axios'
import { createApp } from 'vue'
import router from './router/index'; //路由文件路径
import App from './App.vue'
import Element3 from 'element3' //Element3
const app=createApp(App)
app.use(router)
app.use(Element3)
app.mount('#app')
//router文件
import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [
{
path: '/',
name: 'login',
// meta: { noAuth: false },
component: () => import('../components/login.vue'),
},
{
path: '/settled',
name: 'settled',
// meta: { noAuth: false },
component: () => import('../components/settled.vue'),
},
]
// 导出路由
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
vite.config.js文件
const path = require('path')
module.exports = {
proxy: {
'/manager': {
target: `http://www.baidu.com`,
changeOrigin: true,//是否允许跨域
rewrite: path => path.replace(/^\/manager/, '')//函数形式配置以前对象形式也可以用
}
}
}
设置request.js封装axios
import axios from 'axios'
const service = axios.create({
baseURL: '/manager', // api的base_url
timeout: 35000, // 请求超时时间
headers:{
'Account':localStorage.getItem("accountnumber"),
'Authorization':'Bearer '+localStorage.getItem("authorization"),
},
});
// request拦截器
// service.interceptors.request.use(config => {
// // if (store.getters.token) {
// // config.headers['Authorization'] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
// // }
// config.url=root+config.url
// console.log(config.url)
// return config
// }, error => {
// // Do something with request error
// // console.log(error) // for debug
// // Promise.reject(error)
// })
// respone拦截器
service.interceptors.response.use(
response => {
const res = response.data;
if (res.code !== 200) {
if (res.code === 600) {
}
} else {
return response;
}
},
error => {
return Promise.reject(error)
}
)
export default service
api请求封装
import request from './request'
//登录
export function login(params) {
return request({
url: '',
method: 'post',
params: params
})
}