关于vue-cli3: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 被笼罩掉后，它的其余属性将会隐没。