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

作用:设置别名可以让后续引用的地方减少路径的复杂度

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. 使用

因为设置了alias,所以引入utils.js时候可以这样简写

import utils math from "@/utils/index.js";
Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐