Kaynağa Gözat

路由权限,登录,请求loading

@sun-chaoqun 2 yıl önce
ebeveyn
işleme
d9b0264110

+ 2 - 0
.env

@@ -1,3 +1,5 @@
 VITE_BZD_ERP_APP_TITLE = 'ERP宝智达'
 
+VITE_BZD_ERP_APP_API = 'http://erp.baozhida.cn'
+
 VITE_DROP_CONSOLE = true    

+ 4 - 1
components.d.ts

@@ -10,11 +10,13 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     404: typeof import('./src/components/ErrorMessage/404.vue')['default']
-    Dialog: typeof import('./src/components/Dialog/index.vue')['default']
+    Dialog: typeof import('./src/components/dialog/Dialog.vue')['default']
     Drawer: typeof import('./src/components/Drawer/index.vue')['default']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -41,6 +43,7 @@ declare module '@vue/runtime-core' {
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    Loading: typeof import('./src/components/Loading/index.vue')['default']
     Pagination: typeof import('./src/components/TableBase/components/Pagination.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

+ 4 - 3
src/App.vue

@@ -4,9 +4,10 @@ import zh from 'element-plus/lib/locale/lang/zh-cn'
 </script>
 
 <template>
-  <ElConfigProvider :locale="zh">
-    <router-view></router-view>
-  </ElConfigProvider>
+  <!-- <ElConfigProvider :locale="zh">
+    
+  </ElConfigProvider> -->
+  <router-view></router-view>
 </template>
 
 <style scoped></style>

+ 0 - 76
src/api/http.ts

@@ -1,76 +0,0 @@
-import axios from 'axios'
-import type { AxiosInstance, AxiosRequestConfig, InternalAxiosRequestConfig, AxiosResponse } from 'axios'
-
-interface RequestInterceptors {
-  // 请求拦截
-  requestInterceptors?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig
-  requestInterceptorsCatch?: (err: any) => any
-  // 响应拦截
-  responseInterceptors?: <T = AxiosResponse>(config: T) => T
-  responseInterceptorsCatch?: (err: any) => any
-}
-// 自定义传入的参数
-interface RequestConfig extends AxiosRequestConfig {
-  interceptors?: RequestInterceptors
-}
-
-class Request {
-  // axios 实例
-  instance: AxiosInstance
-  // 拦截器对象
-  interceptorsObj?: RequestInterceptors
-  constructor(config: RequestConfig) {
-    this.instance = axios.create(config)
-
-    this.instance.interceptors.request.use(
-      (res: InternalAxiosRequestConfig) => {
-        console.log('全局请求拦截器')
-        return res
-      },
-      (err: any) => err
-    )
-
-    // 使用实例拦截器
-    this.instance.interceptors.request.use(
-      this.interceptorsObj?.requestInterceptors,
-      this.interceptorsObj?.requestInterceptorsCatch
-    )
-    this.instance.interceptors.response.use(
-      this.interceptorsObj?.responseInterceptors,
-      this.interceptorsObj?.responseInterceptorsCatch
-    )
-
-    this.instance.interceptors.response.use(
-      // 因为我们接口的数据都在res.data下,所以我们直接返回res.data
-      (res: AxiosResponse) => {
-        console.log('全局响应拦截器')
-        return res.data
-      },
-      (err: any) => err
-    )
-  }
-
-  request<T>(config: RequestConfig): Promise<T> {
-    return new Promise((resolve, reject) => {
-      // 如果我们为单个请求设置拦截器,这里使用单个请求的拦截器
-      if (config.interceptors?.requestInterceptors) {
-        config = config.interceptors.requestInterceptors(config as InternalAxiosRequestConfig)
-      }
-      this.instance
-        .request<any, T>(config)
-        .then(res => {
-          // 如果我们为单个响应设置拦截器,这里使用单个响应的拦截器
-          if (config.interceptors?.responseInterceptors) {
-            res = config.interceptors.responseInterceptors<T>(res)
-          }
-
-          resolve(res)
-        })
-        .catch((err: any) => {
-          reject(err)
-        })
-    })
-  }
-}
-
-export default Request

+ 34 - 18
src/api/index.ts

@@ -1,15 +1,26 @@
 import axios from 'axios'
 import type { AxiosInstance, AxiosError, AxiosRequestConfig, InternalAxiosRequestConfig, AxiosResponse } from 'axios'
-import { ElMessage } from 'element-plus'
-import { ResultEnum, ResultData } from './interface/index'
+import { ElMessage, ElLoading } from 'element-plus'
+import { ResultEnum, ResultData, ContentType } from './interface/index'
+import { GlobalStore } from '@/stores/index'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const globalStore = GlobalStore()
+type LoadingType = {
+  close?: () => void
+}
+let loadingInstance: LoadingType = {}
 
 const config = {
   // 默认地址请求地址,可在 .env.*** 文件中修改
-  baseURL: import.meta.env.VITE_API_URL as string,
+  // baseURL: import.meta.env.VITE_BZD_ERP_APP_API as string,
   // 设置超时时间(10s)
   timeout: ResultEnum.TIMEOUT as number,
   // 跨域时候允许携带凭证
-  withCredentials: true
+  withCredentials: true,
+  headers: {
+    'Content-Type': ContentType.URLENCODED
+  }
 }
 
 class RequestHttp {
@@ -25,6 +36,16 @@ class RequestHttp {
      */
     this.service.interceptors.request.use(
       (config: InternalAxiosRequestConfig) => {
+        // 开始loading
+        loadingInstance = ElLoading.service({
+          lock: true,
+          text: 'Loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        // 加入token
+        if (globalStore.GET_User_tokey) {
+          config.headers['User_tokey'] = globalStore.GET_User_tokey
+        }
         return config
       },
       (err: any) => err
@@ -37,16 +58,16 @@ class RequestHttp {
     this.service.interceptors.response.use(
       (response: AxiosResponse) => {
         const { data } = response
-        // const globalStore = GlobalStore()
+
         // * 在请求结束后,并关闭请求 loading
-        // tryHideFullScreenLoading()
+        loadingInstance.close && loadingInstance.close()
         // * 登陆失效(code == 401)
-        // if (data.code == ResultEnum.OVERDUE) {
-        //   ElMessage.error(data.msg)
-        //   globalStore.setToken('')
-        //   router.replace(LOGIN_URL)
-        //   return Promise.reject(data)
-        // }
+        if (data.code == ResultEnum.OVERDUE) {
+          ElMessage.error(data.msg)
+          globalStore.SET_User_Tokey('')
+          router.replace('/login')
+          return Promise.reject(data)
+        }
         // * 全局错误信息拦截(防止下载文件得时候返回数据流,没有code,直接报错)
         if (data.code && data.code !== ResultEnum.SUCCESS) {
           ElMessage.error(data.msg)
@@ -56,15 +77,10 @@ class RequestHttp {
         return data
       },
       async (error: AxiosError) => {
-        // const { response } = error
-        // tryHideFullScreenLoading()
+        loadingInstance.close && loadingInstance.close()
         // 请求超时 && 网络错误单独判断,没有 response
         if (error.message.indexOf('timeout') !== -1) ElMessage.error('请求超时!请您稍后重试')
         if (error.message.indexOf('Network Error') !== -1) ElMessage.error('网络错误!请您稍后重试')
-        // 根据响应的错误状态码,做不同的处理
-        // if (response) checkStatus(response.status)
-        // 服务器结果都没有返回(可能服务器错误可能客户端断网),断网处理:可以跳转到断网页面
-        // if (!window.navigator.onLine) router.replace('/500')
         return Promise.reject(error)
       }
     )

+ 5 - 0
src/api/interface/index.ts

@@ -21,6 +21,11 @@ export enum RequestEnum {
   DELETE = 'DELETE'
 }
 
+export enum ContentType {
+  URLENCODED = 'application/x-www-form-urlencoded',
+  JSON = 'application/json; charset=utf-8'
+}
+
 // * 请求响应参数(不包含data)
 export interface Result {
   code: string

+ 3 - 0
src/api/user/index.ts

@@ -0,0 +1,3 @@
+import $http from '../index'
+
+export const Login_verification = (params: any) => $http.post('/user/Login_verification', params)

+ 0 - 21
src/components/Dialog/index.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-const dialogTableVisible = ref(true)
-</script>
-
-<template>
-  <el-dialog v-model="dialogTableVisible" title="Shipping address">
-    <!-- 默认插槽 -->
-    <solt></solt>
-    <!-- 弹框头部 -->
-    <template #title>
-      <slot name="title"></slot>
-    </template>
-    <!-- 弹框页脚 -->
-    <template #footer>
-      <slot name="footer"></slot>
-    </template>
-  </el-dialog>
-</template>
-
-<style scoped></style>

+ 1 - 1
src/components/Drawer/index.vue

@@ -7,7 +7,7 @@ type Fn = () => void
 interface drawerProps {
   title?: string
   handleClose?: (params: Fn) => void
-  direction: string
+  direction?: string
 }
 
 withDefaults(defineProps<drawerProps>(), {

+ 7 - 0
src/components/Loading/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

+ 42 - 0
src/components/dialog/Dialog.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref, toRefs } from 'vue'
+const dialogVisible = ref(false)
+interface DialogProps {
+  width: string
+}
+withDefaults(defineProps<DialogProps>(), {
+  width: '50%'
+})
+// const { dialogVisible } = toRefs(props)
+
+const emit = defineEmits<{ (e: 'on-close', value: boolean): void }>()
+
+const DialogOpen = () => {
+  dialogVisible.value = true
+}
+const DialogClose = () => {
+  dialogVisible.value = false
+}
+// 导出方法
+defineExpose({
+  DialogOpen,
+  DialogClose
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogVisible" @close="DialogClose" @closed="DialogClose" :width="width">
+    <!-- 默认插槽 -->
+    <slot></slot>
+    <!-- 弹框头部 -->
+    <template #header>
+      <slot name="header"></slot>
+    </template>
+    <!-- 弹框页脚 -->
+    <template #footer>
+      <slot name="footer"></slot>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped></style>

+ 9 - 0
src/hooks/useLoading.ts

@@ -0,0 +1,9 @@
+import { ElLoading } from 'element-plus'
+
+export const useLoading = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: 'Loading',
+    background: 'rgba(0, 0, 0, 0.7)'
+  })
+}

+ 9 - 2
src/layouts/Header/index.vue

@@ -1,4 +1,11 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const logOut = () => {
+  localStorage.clear()
+  router.replace('/login')
+}
+</script>
 
 <template>
   <div class="header">
@@ -14,7 +21,7 @@
           </el-button>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item>退出登录</el-dropdown-item>
+              <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
               <el-dropdown-item>Action 2</el-dropdown-item>
               <el-dropdown-item>Action 3</el-dropdown-item>
             </el-dropdown-menu>

+ 6 - 8
src/layouts/Main/index.vue

@@ -14,14 +14,12 @@ console.log(keepAliveStore)
 
 <template>
   <el-main>
-    <transition appear name="fade-transform" mode="out-in">
-      <router-view v-slot="{ Component, route }">
-        <keep-alive>
-          <component :is="Component" :key="route.path" />
-        </keep-alive>
-        <!-- </transition> -->
-      </router-view>
-    </transition>
+    <!-- <transition appear name="fade-transform" mode="out-in"></transition> -->
+    <router-view v-slot="{ Component, route }">
+      <keep-alive>
+        <component :is="Component" :key="route.path" />
+      </keep-alive>
+    </router-view>
   </el-main>
 </template>
 

+ 1 - 1
src/layouts/Menu/SubMenu.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" name="SubMenu">
 import { useRouter } from 'vue-router'
 const router = useRouter()
 defineProps<{ menuList: Menu.MenuOptions[] }>()

+ 4 - 2
src/main.ts

@@ -1,8 +1,6 @@
 import { createApp } from 'vue'
 // 全局默认样式
 import './style.scss'
-// 覆盖element默认样式
-import '@/styles/element.scss'
 // 进度条样式
 import 'nprogress/nprogress.css'
 // element-ui样式
@@ -13,6 +11,10 @@ import router from '@/router/index'
 
 import store from '@/stores/index'
 
+// 覆盖element默认样式
+import '@/styles/element.scss'
+import '@/styles/element-variables.scss'
+
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 const app = createApp(App)

+ 20 - 1
src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import NProgress from 'nprogress'
 import { staticRouter, errorRouter } from './modules/staticRouter'
+import { GlobalStore } from '@/stores/index'
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -8,10 +9,28 @@ const router = createRouter({
   strict: false
 })
 
+const ROUTER_WHITE_LIST = ['/login', '/404']
+
 router.beforeEach((to, from, next) => {
   NProgress.start() // 开始加载
+  const store = GlobalStore()
+  let title = to.meta.title
+  title && (document.title = title as string)
+  console.log(to, from)
+
+  console.log(store.GET_User_tokey)
 
-  next()
+  if (store.GET_User_tokey && to.path !== '/login') {
+    next()
+  } else if (ROUTER_WHITE_LIST.includes(to.path)) {
+    if (store.GET_User_tokey) {
+      next('/')
+    } else {
+      next()
+    }
+  } else {
+    next('/login')
+  }
 })
 
 router.afterEach(() => {

+ 5 - 2
src/router/modules/staticRouter.ts

@@ -8,6 +8,9 @@ export const staticRouter: RouteRecordRaw[] = [
     path: '/index',
     name: 'Index',
     component: () => import('@/views/Index.vue'),
+    meta: {
+      title: '首页'
+    },
     children: [
       {
         path: '/home',
@@ -20,7 +23,7 @@ export const staticRouter: RouteRecordRaw[] = [
       {
         path: '/roles',
         name: 'Roles',
-        component: () => import('@/views/account/roles/index.vue'),
+        component: () => import('@/views/account/roles/Roles.vue'),
         meta: {
           title: '角色管理'
         }
@@ -28,7 +31,7 @@ export const staticRouter: RouteRecordRaw[] = [
       {
         path: '/users',
         name: 'Users',
-        component: () => import('@/views/account/users/index.vue'),
+        component: () => import('@/views/account/users/Users.vue'),
         meta: {
           title: '账户管理'
         }

+ 14 - 4
src/stores/index.ts

@@ -1,11 +1,21 @@
 import { defineStore, createPinia } from 'pinia'
-
+import { GlobalState } from './interface/index'
 export const GlobalStore = defineStore({
   id: 'GlobalState',
-  state: () => ({
+  state: (): GlobalState => ({
     loading: false,
-    token: ''
-  })
+    User_tokey: localStorage.getItem('User_tokey') || ''
+  }),
+  getters: {
+    GET_User_tokey: state => state.User_tokey
+  },
+  actions: {
+    SET_User_Tokey(payload: string) {
+      if (typeof payload === 'string') {
+        this.User_tokey = payload
+      }
+    }
+  }
 })
 
 const pinia = createPinia()

+ 3 - 2
src/stores/interface/index.ts

@@ -1,7 +1,8 @@
 /* GlobalState */
 export interface GlobalState {
-  token: string
-  userInfo: any
+  loading: boolean
+  User_tokey: string
+  userInfo?: any
   language?: string
 }
 

+ 17 - 8
src/style.scss

@@ -14,17 +14,26 @@
   -webkit-text-size-adjust: 100%;
 }
 
-*{
-  margin:0;
-  padding:0;
+* {
+  margin: 0;
+  padding: 0;
   box-sizing: border-box;
 }
-html,body,#app{
+html,
+body,
+#app {
   height: 100%;
   width: 100%;
 }
 
-
-
-
-
+::-webkit-scrollbar {
+  width: 2px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background: rgba(0, 0, 0, 0.2);
+}
+::-webkit-scrollbar-track {
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}

+ 1 - 0
src/styles/element-variables.scss

@@ -0,0 +1 @@
+

+ 17 - 9
src/views/Index.vue

@@ -4,7 +4,7 @@ import Main from '@/layouts/Main/index.vue'
 import Header from '@/layouts/Header/index.vue'
 const routerList = [
   {
-    path: '/index',
+    path: '/home',
     name: 'Home',
     meta: {
       icon: 'HomeFilled',
@@ -132,7 +132,7 @@ const routerList = [
     <el-aside width="210px">
       <el-scrollbar class="scrollbar">
         <el-menu :unique-opened="true" :collapse-transition="false" text-color="#303133">
-          <SubMenu :menuList="routerList" />
+          <SubMenu :menu-list="routerList"></SubMenu>
         </el-menu>
       </el-scrollbar>
     </el-aside>
@@ -140,13 +140,6 @@ const routerList = [
       <el-header>
         <Header />
       </el-header>
-      <!-- <el-main>
-        <router-view v-slot="{ Component, route }">
-          <transition appear name="fade-transform" mode="out-in">
-            <component :is="Component" :key="route.path" />
-          </transition>
-        </router-view>
-      </el-main> -->
       <Main />
     </el-container>
   </el-container>
@@ -171,4 +164,19 @@ const routerList = [
     border-bottom: solid 1px var(--el-menu-border-color);
   }
 }
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.2s;
+}
+.fade-transform-enter-from {
+  opacity: 0;
+  transition: all 0.2s;
+  transform: translateX(-30px);
+}
+.fade-transform-leave-to {
+  opacity: 0;
+  transition: all 0.2s;
+  transform: translateX(30px);
+}
 </style>

+ 18 - 2
src/views/Login.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
+import { ElNotification } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
 import { User, View, Lock } from '@element-plus/icons-vue'
+import { Login_verification } from '@/api/user/index'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 const ruleFormRef = ref<FormInstance>()
 const ruleForm = reactive({
   username: '',
@@ -23,9 +27,21 @@ const rules = reactive<FormRules>({
 
 const submitForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return
-  formEl.validate(valid => {
+  formEl.validate(async valid => {
     if (valid) {
-      console.log(ruleForm)
+      // console.log(ruleForm)
+      let res: any = {}
+      res = await Login_verification({ bzd_username: ruleForm.username, bzd_password: ruleForm.password })
+      console.log(res)
+      if (res.Code === 200) {
+        ElNotification.success({
+          title: '登录成功',
+          message: '欢迎进入宝智达ERP系统!',
+          position: 'bottom-right'
+        })
+        localStorage.setItem('User_tokey', res.Data)
+        router.replace('/')
+      }
     } else {
       console.log('error submit!')
       return false

+ 0 - 0
src/views/account/roles/index.vue → src/views/account/roles/Roles.vue


+ 84 - 0
src/views/account/users/Users.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="role">
+    <el-button type="primary" @click="DialogOpen">添加</el-button>
+    <Dialog ref="dialog" width="80%">
+      <template #header>
+        <h3>
+          角色名:<span>{{ '程序员' }}</span>
+        </h3>
+      </template>
+      <el-row :gutter="24">
+        <el-col :span="4"><div class="grid-content">功能模块</div></el-col>
+        <el-col :span="16"><div class="grid-content">权限</div></el-col>
+        <el-col :span="4"><div class="grid-content">操作</div></el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="4"
+          ><div class="grid-content"><el-button type="success" text>仓库管理</el-button></div></el-col
+        >
+        <el-col :span="16"
+          ><div class="grid-content grid-active">
+            <el-checkbox-group v-model="checkList">
+              <el-checkbox label="Option A" />
+              <el-checkbox label="Option B" />
+              <el-checkbox label="Option C" />
+              <el-checkbox label="Option B" />
+              <el-checkbox label="Option C" />
+              <el-checkbox label="Option B" />
+              <el-checkbox label="Option C" />
+              <el-checkbox label="Option C" />
+              <el-checkbox label="Option B" />
+              <el-checkbox label="Option C" />
+              <el-checkbox label="Option C" />
+              <el-checkbox label="Option B" />
+              <el-checkbox label="Option C" />
+            </el-checkbox-group></div
+        ></el-col>
+        <el-col :span="4"
+          ><div class="grid-content">
+            <el-button type="primary">提交</el-button>
+          </div></el-col
+        >
+      </el-row>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Dialog from '@/components/dialog/Dialog.vue'
+const dialog = ref()
+const DialogOpen = () => {
+  dialog.value.DialogOpen()
+}
+const checkList = ref()
+</script>
+
+<style scoped lang="scss">
+.grid-content {
+  background-color: #e4e7ed;
+  padding: 1rem 2rem;
+  max-height: 3.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.grid-active {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.el-checkbox-group {
+  display: flex;
+  overflow-x: auto;
+}
+.el-row {
+  margin-bottom: 1rem;
+  max-height: 3.5rem;
+}
+h3 span {
+  font-size: 1rem;
+  color: #606266;
+}
+</style>

+ 0 - 12
src/views/account/users/index.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import Dialog from '@/components/Dialog/index.vue'
-</script>
-
-<template>
-  <div class="role">
-    <el-button type="primary">添加</el-button>
-    <Dialog />
-  </div>
-</template>
-
-<style scoped></style>

+ 37 - 19
vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig, loadEnv, ConfigEnv, UserConfig } from "vite";
-import { createHtmlPlugin } from "vite-plugin-html";
-import vue from "@vitejs/plugin-vue";
-import { resolve } from "path";
+import { defineConfig, loadEnv, ConfigEnv, UserConfig } from 'vite'
+import { createHtmlPlugin } from 'vite-plugin-html'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
 // import eslintPlugin from "vite-plugin-eslint";
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
@@ -9,40 +9,58 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
-  const env = loadEnv(mode, process.cwd());
+  const env = loadEnv(mode, process.cwd())
 
   return {
     resolve: {
       alias: {
-        '~':resolve(__dirname, "./"),
-        '@': resolve(__dirname, "./src")
-      },
+        '~': resolve(__dirname, './'),
+        '@': resolve(__dirname, './src')
+      }
     },
     server: {
-      host: "0.0.0.0",
+      open: true,
+      host: '0.0.0.0',
+      proxy: {
+        '/user': {
+          target: 'http://erp.baozhida.cn',
+          changeOrigin: true
+          // rewrite: path => path.replace(/^\/api/, '')
+        },
+        '/salary': {
+          target: 'http://erp.baozhida.cn',
+          changeOrigin: true
+          // rewrite: path => path.replace(/^\/salary/, '')
+        },
+        '/ams': {
+          target: 'http://erp.baozhida.cn',
+          changeOrigin: true
+          // rewrite: path => path.replace(/^\/ams/, '')
+        }
+      }
     },
     plugins: [
       vue(),
       createHtmlPlugin({
         inject: {
           data: {
-            title: env.VITE_BZD_ERP_APP_TITLE,
-          },
-        },
+            title: env.VITE_BZD_ERP_APP_TITLE
+          }
+        }
       }),
       // eslintPlugin({
       //   include: ["src/**/*.js", "src/**/*.vue", "src/*.js", "src/*.vue"],
       // }),
       AutoImport({
-        resolvers: [ElementPlusResolver()],
+        resolvers: [ElementPlusResolver()]
       }),
       Components({
-        resolvers: [ElementPlusResolver()],
-      }),
+        resolvers: [ElementPlusResolver()]
+      })
     ],
     // * 打包去除 console.log && debugger
     esbuild: {
-      pure: env.VITE_DROP_CONSOLE ? ["console.log", "debugger"] : [],
-    },
-  };
-});
+      pure: env.VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : []
+    }
+  }
+})