项目源码-Vue3项目04-别名配置

Last Updated on 2025年1月6日 by hangzi

别名配置

src路径别名配置，使用 @ 代替 src

1、安装依赖

pnpm add @types/node -D

2、配置别名

• 方式一：

vite.config.js配置

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

import {resolve} from 'path'

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

• 方式二：

vite.config.js配置

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

import {fileURLToPath,URL} from "url";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3、使用别名

项目Demo源码：https://github.com/hangzhi7/Vue3-Demo