`Vue3 - Vite`项目别名src to @ not working

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

这就是对我有效的方法..。

import vue from '@vitejs/plugin-vue'
const path = require('path')

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

Answer 2

在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'),
    },
  }
})

Answer 3

这就是对我有效的方法：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@/': `${path.resolve(__dirname, 'src')}/`
    }
  }
})

然后在组件中：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>