12：vite 对路径别名的处理

路径别名配置

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'),
            '@assets': path.resolve(__dirname, './src/assets')
        }
    }
})

// import './src/svgLoader'
import '@/svgLoader'

// import svgIcon from './assets/svgs/fullScreen.svg'
import svgIcon from '@assets/svgs/fullScreen.svg'

这样就可以用路径别名来引入资源了。

alias 原理

alias 的大致原理就是 node 在读取文件的时候，遇到配置过的路径别名会在解析的时候去替换，把字符串路径替换成对应的就行了，具体替换过程这里就不记笔记了。