configureWebpack配置alias别名的两种方式

vue-cli 3.X webpack配置(resolve.alias的配置)

一、configureWebpack对象形式

configureWebpack:{
  resolve: {
    // 别名配置
    alias: {
      'assets': '@/assets',
      'common': '@/common',
      'components': '@/components',
      'network': '@/network',
      'configs': '@/configs',
      'views': '@/views',
      'plugins': '@/plugins',
    }
  }
},

二、configureWebpack函数形式

 configureWebpack: (config) => {
   if (process.env.NODE_ENV === 'production') {
     // 为生产环境修改配置...
     config.mode = 'production'
   } else {
     // 为生产环境修改配置...
     config.mode = 'development'
   }
   // 开发生产共同配置别名
   Object.assign(config.resolve, {
     alias: {
       '@': path.resolve(__dirname, './src'),
       'assets': path.resolve(__dirname, './src/assets'),
       'common': path.resolve(__dirname, './src/common'),
       'components': path.resolve(__dirname, './src/components'),
       'network': path.resolve(__dirname, './src/network'),
       'configs': path.resolve(__dirname, './src/configs'),
       'views': path.resolve(__dirname, './src/views'),
       'plugins': path.resolve(__dirname, './src/plugins'),
     }
   })
 },

详细说明

使用vue-cli3.x及以上版本与vue-cli2.x进行项目构建的区别之一，是生成的项目中，进行webpack配置的文件没有了。因为3.x，将大部分相同的webpack配置，已封装到cli安装包中。

若想添加一些自己的项目配置，只需在项目的根目录下新建一个vue.config.js文件即可，内容如下:

module.exports = {  
  outputDir: 'dist', //打包文件输出路径，即打包到哪里 
  assetsDir: 'static',  // 静态资源地址  
  lintOnSave: false, // eslint-loader 是否在保存的时候检查  
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  filenameHashing: true, //文件hash
  // chainWebpack 这个库提供了一个webpack原始配置的上层抽象，使其可以定义具名的 loader规则和具名插件，
  // 可以通过其提供的一些方法链式调用，在cli-service中就使用了这个插件
  chainWebpack: () => {},
  /* configureWebpack是调整webpack配置最简单的一种方式，可以新增也可以覆盖cli中的配置。
     可以是一个对象：被 webpack-merge 合并到 webpack 的设置中去
     也可以是一个函数：如果你需要基于环境有条件地配置行为，就可以进行一些逻辑处理，可以直接修改或新增配置，(该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，可以直接修改配置，或者返回一个将会被合并的对象。
  */  
  configureWebpack: {}
}

配置 import 和 require 等路径别名。

webpack 中是通过 resolve.alias 来实现此功能的，参考： https://www.webpackjs.com/con...。在vue-cli3.x中我们可以通过以下几种方式实现：

1.直接修改 cli-service 文件，添加webpack的相关配置。

按图片中路径打开 base.js 文件：可以通过set方法添加想要的 alias 配置，不推荐此方式。

2.在vue.config.js 中使用 chainWebpack 的方式

const path = require('path')
function resolve (dir) {
  //此处可使用 path.resolve 或 path.join
  return path.join(__dirname, dir)
}

module.exports = {
  devServer: {
    ...
  },
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  filenameHashing: true, //文件hash
  chainWebpack: config => {
    config.resolve.alias
    // 自定义key,value，如.set('@assets', resolve('src/assets'))
    .set(key,value)
  }
}

3.在 vue.config.js 中使用 configureWebpack 的方式

对象形式，会和cli中的设置合并到一起

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

module.exports = {
  devServer: {
    ...
  },
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
   filenameHashing: true, //文件hash
   configureWebpack: {
     resolve: {
       alias: {
         '@assets': resolve('src/assets')
       }
     }
   },
}

函数形式

const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  devServer: {
    ...
  }, 
  lintOnSave: false, // eslint-loader 是否在保存的时候检查  
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件  
  filenameHashing: true, //文件hash
  configureWebpack: config => {
    if (isProduction) {
      ...
    } else {
      ...
    }
    //直接修改配置
    config.resolve.alias['@asset'] = resolve('src/assets')
  }
}

或者：

const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  devServer: {
    ...
  }, 
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  filenameHashing: true, //文件hash
  configureWebpack: config => {
    if (isProduction) {
      ...
    } else {
      ...
    }
    //返回一个将要合并的对象
    return {
      resolve: {
        alias: {
          '@asset':resolve('src/assets')
        }
      }
    } 
  }
}

最好不要使用下面的方式，因为Object.assign方法在合并对象时，如果目标对象（config）上有相同的属性（resolve），将会被覆盖掉。不过这样写 Object.assign(config.resolve,{alias:{}}) 还是可以的，只是覆盖掉了alias。

Object.assign(config, {
  resolve: {
    alias: {
      '@': resolve('./src'),
      '@assets': resolve('./src/assets')
    }
  }
})

合并后，变成：

alias: {
  '@': resolve('./src'),
  '@assets': resolve('./src/assets')
}

但是 cli-service 中 resolve 被覆盖掉后，它的其他属性将会消失。