javascript - `Vue3 - Vite` 项目别名 src 到 @ 不工作

Question

我已经用 vue3 - vite 安装了这个项目导入一个组件，如

import Component from '../../../../components/Component.vue'

我只想给 src 文件夹起别名并做

import Component from '@/components/Component.vue'

这是我的 vite.config.js

import vue from '@vitejs/plugin-vue'

/**
 * https://vitejs.dev/config/
 * @type {import('vite').UserConfig}
 */
export default {
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    // ...
                }
            }
        })
    ]
}

我错过了什么吗？我还应该做什么？

Answer 1

在 vite.config.js文件写入以下代码块

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  }
})