# vue_admin

**Repository Path**: li-yangfei/vue_admin

## Basic Information

- **Project Name**: vue_admin
- **Description**: Vue3后台管理，后期可能加入部分GIS页面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-12
- **Last Updated**: 2026-05-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue_admin

## 目录

## 通用功能

### SVG图标封装

1. 安装

```bash
npm i vite-plugin-svg-icons -D
npm install fast-glob --save-dev
```

2. 配置

- `vite.config.js`

```js
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

...
plugins: [
  createSvgIconsPlugin({
    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
    symbolId: 'icon-[dir]-[name]'
  })
]
...
```

- `main.js`

```js
import 'virtual:svg-icons-register'
```

3. 封装`SvgIcon`组件

```vue
<template>
  <svg :width="width" :height="height">
    <use :xlink:href="`#icon-${name}`" :fill="color" />
  </svg>
</template>
<script setup>
defineProps({
  name: {
    type: String,
    default: '',
  },
  width: {
    type: Number,
    default: 32,
  },
  height: {
    type: Number,
    default: 32,
  },
  color: {
    type: String,
    default: '',
  },
})
</script>
```

## Mock

vue_admin/
├── mock/ # ✅ Mock 独立目录
│ ├── index.js
│ └── ...
├── src/
│ ├── api/ # API 接口定义
│ │ └── ...
│ ├── views/ # 页面组件
│ │ └── ...
│ └── main.js
├── vite.config.js # ✅ 已配置 mock 插件
├── vite.mock.config.js # ✅ Mock 配置文件
└── package.json

1. 安装

```bash
npm install vite-plugin-mock@2.9.6 -D
npm install mockjs -D
```

2. 配置文件

- 在项目根目录创建 vite.mock.config.js

```js
// vite.mock.config.js
import { viteMockServe } from 'vite-plugin-mock'
export function setupMock(isBuild) {
  return viteMockServe({
    // 是否启用 mock
    enable: !isBuild,
    // mock 文件目录
    mockDir: 'mock',
    // 本地环境文件路径
    localEnabled: true,
    // 生产环境是否启用（建议关闭，或按需开启）
    prodEnabled: false,
    // 监听文件更改
    watchFiles: true,
    // 日志级别
    logger: true,
  })
}
```

- 修改 vite.config.js

```js
import { setupMock } from './vite.mock.config'
export default defineConfig({
  plugins: [setupMock(isBuild)],
})
```

3. 创建 Mock 数据文件

```js
import Mock from 'mockjs'

// 用户列表
const userList = [
  { id: 1, username: 'admin', role: 'admin' },
  { id: 2, username: 'editor', role: 'editor' },
]

export default [
  // 获取用户列表
  {
    url: '/api/user/list',
    method: 'get',
    response: () => {
      return {
        code: 200,
        message: 'success',
        data: userList,
      }
    },
  },
  // 获取用户详情
  {
    url: '/api/user/:id',
    method: 'get',
    response: ({ query }) => {
      const { id } = query
      const user = userList.find((u) => u.id == id)
      return {
        code: 200,
        data: user || null,
      }
    },
  },
]
```

## axios封装

1. 封装

```js
import axios from 'axios'

// TAG: 创建axios实例
const request = axios.create({
  baseURL: '/api',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
})

// TAG: 请求拦截器
request.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  (error) => {
    console.error('❌ 请求拦截器错误:', error)
    return Promise.reject(error)
  },
)

// TAG: 响应拦截器
request.interceptors.response.use(
  (response) => {
    const res = response.data
    if (res.code === 200 || res.code === 0) {
      return res.data
    }
    console.error('❌ 业务错误:', res.message || '未知错误')
    return Promise.reject(new Error(res.message || '业务错误'))
  },
  (error) => {
    console.error('❌ 响应拦截器错误', error)
    if (error.response) {
      // 服务器返回了错误状态码
      let message = ''
      const { status, data } = error.response

      switch (status) {
        case 400:
          message = '请求参数错误'
          break
        case 401:
          message = '未授权或token过期'
          break
        case 403:
          message = '没有权限访问'
          break
        case 404:
          message = '请求的资源不存在'
          break
        case 500:
          message = '服务器内部错误'
          break
        case 502:
          message = '网关错误'
          break
        case 503:
          message = '服务不可用'
          break
        default:
          message = data?.message || `请求失败 (${status})`
      }
      return Promise.reject(new Error(message))
    } else if (error.request) {
      if (error.message.includes('timeout')) {
        return Promise.reject(new Error('请求超时，请检查网络'))
      }
      return Promise.reject(new Error('网络连接失败，请检查网络'))
    }
    return Promise.reject(error)
  },
)

export default request
```

2. 调用

```js
// 无参数
request.get('/user/list')

// 带参数（query string）
request.get('/user/list', {
  params: { page: 1, size: 10, keyword: 'test' },
})
// 实际请求 → GET /api/user/list?page=1&size=10&keyword=test

// 无参数
request.post('/user/create')

// 带 JSON body 参数
request.post('/user/create', {
  name: '张三',
  age: 25,
  roles: ['admin'],
})
// 实际请求 → POST /api/user/create  Content-Type: application/json
```

## 环境变量`.evn.xxx`

import.meta.env.VITE_APP_API_BASE_URL

> 原理:

1. 创建不同环境的配置文件，如`.env.dev`、`.env.prod`等
2. 修改`pakcage.json`中的`scripts`执行脚本的参数

```bash
scripts: {
  "dev": "vite --mode dev",
}
```

3. 运行的过程中node会将`.env+脚本中的参数`为名的文件中的值加载到`process.env`中，在代码中可以通过`import.meta.env.参数名称`来获取，在类似`index.html`中可以通过`%参数名称%`来获取

## 静态资源压缩

1. 安装依赖

```bash
npm i -D vite-plugin-compression
```

2. `vite.config.js`配置

```js
viteCompression({
  // === 压缩算法 ===
  algorithm: 'gzip', // 'gzip' | 'brotliCompress' | 'deflate'

  // === 输出文件后缀 ===
  ext: '.gz', // gzip → .gz, brotli → .br

  // === 压缩阈值（字节），小于此值不压缩 ===
  threshold: 10240, // 默认 10KB，推荐 1024 以上

  // === 是否删除原文件（仅保留压缩文件）===
  deleteOriginFile: false, // 一般设为 false，保留原文件作 fallback

  // === 压缩过滤 ===
  filter: /\.(js|mjs|json|css|html|svg|ico|ttf|woff2?)$/i,

  // === 压缩级别 ===
  // gzip: 1-11 (默认 9)
  // brotli: 0-11 (默认 11)
  compressionOptions: { level: 9 },

  // === 是否在 dev 模式也启用（一般不需要）===
  disable: false,
})
```