vite配置打包别名

背景

在实际业务中，使用基于相对路径具有维护困难，不直观的缺点，可以配置vite使用别名进行打包识别路径的替换。

vite 配置

编辑vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    // 使用 alias 配置可以将文件打包的识别路径用别名进行替换，避免在文件引入别的组件的时候使用很长的相对路径
    alias: {
      '@': path.resolve(__dirname, 'src'),
      components: path.resolve(__dirname, 'src/components'),
      apis: path.resolve(__dirname, 'src/apis'),
      utils: path.resolve(__dirname, 'src/utils'),
      views: path.resolve(__dirname, 'src/views'),
      styles: path.resolve(__dirname, 'src/styles'),
    }
  },
  plugins: [vue()]
})

结果

使用alias之前想要引入 components 下的组价

import HelloWorld from './components/HelloWorld.vue'

使用 alias 之后

import HelloWorld from 'components/HelloWorld.vue'