webpack 和 vscode 路径别名 @ 设置

Table of Contents

路径别名用得挺多的,却发现还没写文字记录如何配置。这篇文章补一下。

webpack

这里以 vue 项目为例:

// vue.config.js
const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  configureWebpack: config => {
    const configNew = {
      resolve: {
        // 设置 alias
        alias: {
          '@': resolve('src')
        }
      }
    }
    return configNew
  }
}

vscode

// jsconfig.json
{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}