Vue3配置‘@’路径

1，先下载对应配置，以便后续导入

npm install @types/node --d

2，进入vite.config.ts文件中

在plugins: [vue()],后面添加 resolve ，这里有几种写法

第一种写法（推荐，使用数组）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from "node:path";


// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 配置别名 @ 指向 src 目录

  // 数组写法（对象数组 alias: [{ find, replacement }]）
  /**
   * 是 Vite 推荐的写法
   * 支持多个别名映射  例如  customResolver、exact
   *
   */
  resolve: {
    alias: [
      {
        find: "@",
        replacement: path.resolve(process.cwd(), "src"),
      },
    ],
  }
  })

第二种写法 （对象写法，Webpack风格）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from "node:path";


// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 配置别名 @ 指向 src 目录
  
  // 对象写法（键值对 alias: { key: value }）
  // Webpack 风格的写法
  /**
   * Vite 也支持这个形式
   * 推荐前者
   */
   resolve:{
     alias: {
       "@": path.resolve('src'),
     }
   }
})

如何使用

在需要引入的地方直接使用@即可 例如：
import mainContent from ‘@/components/mainContent.vue’