vue cli 中关于vue.config.js中chainWebpack的配置

　　Vue CLI  的官方文档上写：调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象。

　　Vue CLI 内部的 webpack 配置是通过 webpack-chain (链式操作)维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。

它允许我们更细粒度的控制其内部配置。接下来有一个在 vue.config.js 中的 chainWebpack修改的例子。

// 直接引用node中自带的模块

const path = require('path');

// __dirname 总是指向被执行 js 文件的绝对路径,也就是说你在E:\web\test\vue.config.js中写__dirname那么路径就是E:\web\test

function resolve (dir) {

 // 例如 path.join(__dirname,'src')输出 E:\web\test\src

return path.join(__dirname, dir) } module.exports = {
// 设置代理
  devServer: {
    port: 8080,
    proxy: {
      "/gateway": {
        target: "http://aaa.com/",
        changeOrigin: true,

        pathRewrite: {
          "^/app/": "/app/"
        }
      }
    }
  },
// 设置是否在开发环境下每次保存代码时都启用 eslint验证。
// true 开启每次保存都进行检测，效果与warning一样

  lintOnSave: true,
  chainWebpack: config => {
    config.resolve.alias
      .set("home", resolve("src/views/home"))
      .set("utils", resolve("src/utils"))
  }
};

 

官方的文档中写到：

配置 resolve 别名

config.resolve.alias : ChainedMap

config.resolve.alias
  .set(key, value)
  .set(key, value)
  .delete(key)
  .clear()

resolve的的一个属性alias（别名）。

在这里，我们在全局配只一个别名，这样我们在其它地方在调用home目录里的文件时，我们就可以省下一些路径，直接用home代替就好啦例如

例如下面的图片是我的src下面的目录

 这里是我router.js的引用。

是不是 看起来就方便了很多呢！

以上就是我的理解，希望大家多多提出意见！