Vue.js路径解析异常：无法识别@views与@src别名路径

一、根据构建工具配置别名 #

针对不同项目构建工具，添加对应的别名解析配置：

1. Vue CLI（基于Webpack）项目 #

在项目根目录创建/修改vue.config.js文件：

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@src': path.resolve(__dirname, 'src'),
        '@views': path.resolve(__dirname, 'src/views')
      }
    }
  }
};

2. Vite项目 #

在项目根目录创建/修改vite.config.js文件：

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

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

二、配置IDE识别别名 #

创建/修改项目根目录下的jsconfig.json（JS项目）或tsconfig.json（TS项目），让IDE能正确解析别名路径：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
      "@views/*": ["src/views/*"]
    }
  },
  "include": ["src/**/*"]
}

三、必做检查项 #

• 确认src/views/Home.vue、src/App.vue文件存在，路径与别名指向完全匹配
• 修改配置文件后必须重启开发服务器，新配置才会生效
• 检查别名（如@views）和文件名（如Home.vue）的拼写是否有误

内容的提问来源于stack exchange，提问作者Timothy