vue项目 使用webpack 配置别名alias

当项目逐渐变大之后，文件与文件直接的引用关系会很复杂，这时候就需要使用alias 了。 有的人喜欢alias 指向src目录下，也可以设置搜索的模块后缀名，再使用相对路径找文件。设置别名可以让后续引用的地方减少路径的复杂度。

vue-cli 3.0 在vue.config.js下配置别名alias

1. 项目目录结构

- src
   - utils
     - index.js
   - config
     - config.js
   - main.js
- webpack.config.js

2. webpack.config.js

const resolve = dir => require('path').join(__dirname, dir)
module.exports = {
  resolve: {
    alias: {
      '@': resolve('src'), //配置src目录的别名
      '_c': resolve('src/components') //配置公共组件目录的别名
    }
  }
}

3. 使用

import utils math from "@/utils/index.js"; // 因为设置了alias，所以引入utils.js时候可以这样简写