pure-admin学习

环境配置

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

在 .env 文件中添加自定义配置 VITE_HANDSOME = true

在 .env 中加入 VITE_HANDSOME = true
shell
```
# 自定义配置
VITE_HANDSOME = true
```
1
2
在 global.d.ts 加入类型支持，在 interface ViteEnv 里加上 VITE_HANDSOME: boolean
ts
```
declare global {
  interface ViteEnv {
    VITE_HANDSOME: boolean;
  }
}
```
1
2
3
4
5
设置默认值，在 build/utils.ts 文件的 ret 变量上加上 VITE_HANDSOME: true
ts
```
const ret: ViteEnv = {
  VITE_HANDSOME: true
}
```
1
2
3

Vite插件

vite-svg-loader

将 SVG 文件转换为可直接交互的 Vue/React 组件

ts

import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [
    vue(), 
    // svg组件化支持
    svgLoader()
  ]
})

使用方式

ts

import iconUrl from './my-icon.svg?url'
// 'data:image/svg+xml...'

import iconRaw from './my-icon.svg?raw'
// '<?xml version="1.0"?>...'

import IconComponent from './my-icon.svg?component'
// <IconComponent />