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'