配置 Webpack 解析 @ 路径

前言

Vue-cli 默认配置了一个使用 @ 表示 src 的功能，这个功能的原理是配置 webpack 解析路径，这篇文章来介绍如何配置 Webpack 使其他项目比如 React 也能使用这个功能

配置

在 webpack 的配置文件中，写入

resolve: {
    // 自动补全的扩展名
    extensions: ['.js', '.vue', '.json'],
    // 默认路径代理
    // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
    alias: {
        '@': resolve('src'),
        // '@': paths.appSrc, // react
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'
    }
}

IDEA 识别

在 IDEA 中无法正确解析 @ 代表的路径，导致经常提醒 Module is not installed

解决方案

项目根目录新建 jsconfig.json 文件即可

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "dist",
    "build"
  ]
}