Vue3 配置路径别名

一、Vite 项目基础配置

1. 安装依赖

需先安装 @types/node 用于 TypeScript 类型支持：

npm install @types/node -D 

2. 修改 vite.config.ts

在配置文件中添加路径别名解析规则：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 引入 path 模块 

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'), // 主路径别名 
      '#': resolve(__dirname, 'types') // 类型声明文件别名 
    },
    extensions: ['.vue', '.js', '.ts'] // 自动补全文件扩展名 
  },
  plugins: [vue()]
})

3. 配置 tsconfig.json

添加 TypeScript 路径映射：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "#/*": ["types/*"]
    }
  }
}

---

二、Webpack 项目配置（Vue CLI）

适用于使用 vue-cli 创建的项目，需在 vue.config.js 中配置：

const path = require('path')
 
module.exports = {
  chainWebpack: config => {
    config.resolve.alias 
      .set('@', path.resolve(__dirname, 'src'))
      .set('assets', path.resolve(__dirname, 'src/assets'))
  }
}

---

三、编辑器智能提示优化

1. WebStorm 配置

在 Settings > Languages & Frameworks > JavaScript > Webpack 中选择 vite.config.ts 或 vue.config.js 作为配置文件，确保路径别名自动识别。

2. VSCode 配置

创建 jsconfig.json（或 tsconfig.json）并添加 baseUrl 和 paths 配置，IDE 会自动识别。

---

四、注意事项

1. 路径符号差异

• Vite 中推荐使用 @/components/Button.vue 格式
• Webpack 旧项目可能需要 ~assets/logo.png 格式

2. 配置文件位置

• Vite：vite.config.ts
• Vue CLI：vue.config.js

3. 重启服务生效

修改配置后需重启开发服务器（npm run dev）