【vue-cli3】vue.config.js中遇到的那些坑

vue-cli升级到3.x版本之后，构建出来的项目比较简练，但是没有了webpack的显式配置，如果想要脚手架适用自己的项目，就需要配置vue.config.js，具体如何配置官网也给出了详细说明，可以参考官网，vue.config.js配置项说明，以下为本人配置过程中遇到的一些坑，不对的地方或有更好的解决办法也希望大家能及时指出，欢迎大家一起探讨。
之前vue-cli2.x版本显式配置webpack的方法已经不行了，所有配置操作都需要在vue.config.js中配置，官网给出了两个配置webpack的选项：

• 简单配置：configureWebpack 选项
  • 比较简单，跟以前配置webpack一样
  • 通过 webapck-merge 的方式来合并(所以无法修改已经配置的选项)
• 链式操作：chainWebpack 选项
  • 需要一定的学习成本，学习 webapck-chain 的操作，点击查看官网
  • 直接操作webapck，可以修改已经配置的选项

配置完之后可以通过 vue ui 命令打开 vue-cli3 提供的视图界面：任务 -> inspect 来检查 webpack 的配置，也可以使用 vue inspect 来查看某一项的配置。

1. 多页面配置

vue-cli3 提供了开箱即用的多页面配置，配置vue.config.js 中的 pages 选项即可，因为每增加一个页面就需要增加个选项，不可能自己每次都添加，考虑到借助工具来自动处理这些事情，所以单独配置了 MultiPage.config.js 文件，借助 node 来自动处理：

// MultiPage.config.js
// 多页面配置
const fs = require('fs');
const path = require('path');
const fileNames = fs.readdirSync(path.resolve(__dirname, './src/pages'));
const MutiPageConfig = {};

fileNames.forEach((pageName) => {
  MutiPageConfig[pageName] = {
    // page 的入口
    entry: `src/pages/${pageName}/index.js`,
    // 模板来源
    template: `src/pages/${pageName}/index.html`,
    // 在 dist 的输出
    filename: `views/${pageName}/index.html`,
    // 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
    // title: '',
    // 在这个页面中包含的块，默认情况下会包含提取出来的通用 chunk 和 vendor chunk，如果自己有配置 splitChunks 选项，可以在此添加
    chunks: ['chunk-vendors', 'chunk-common', pageName]
  }
});

module.exports = MutiPageConfig;
复制代码

然后在 vue.config.js 中引入即可：

// 引入多页面配置文件
const MutiPageConfig = require('./MultiPage.config');
// multiple-pages 多页面模式下构建应用 
pages: MutiPageConfig,
复制代码

2. 配置 jquery

项目中用到了一些小的jquery插件，所以需要引入并配置jquery，该选项的配置，起初是通过 chainWebpack 来完成的：

chainWebpack: (config) => {
    // 添加expose-loader，此配置略显繁琐，使用configureWebpack来配置此项
    config.module
      .rule('expose1')
      .test(require.resolve('jquery'))
      .use('expose-loader')
      .loader('expose-loader')
      .options('jquery')
      .end();
    config.module
      .rule('expose2')
      .test(require.resolve('jquery'))
      .use('expose-loader')
      .loader('expose-loader')
      .options('$')
      .end()
    config.module
      .rule('expose3')
      .test(require.resolve('jquery'))
      .use('expose-loader')
      .loader('expose-loader')
      .options('jQuery')
      .end()
  },
复制代码

看上去比较麻烦，重复操作，后来想到 vue-cli3 中并未配置 expose-loader ，所以完全可以通过 configWebpack 来 merge 到之前的配置中，所以就做了如下修改：

configureWebpack: (config) => {
    // 设置别名
    config.resolve.alias['img'] = path.resolve(__dirname, '../src/assets/images');
    config.resolve.alias['styles'] = path.resolve(__dirname, '../src/assets/styles');
    
    // 添加 loader
    config.module.rules.push({
      // 处理jquery
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: 'jquery'
      }, {
        loader: 'expose-loader',
        options: '$'
      }, {
        loader: 'expose-loader',
        options: 'jQuery'
      }]
    })
  }
复制代码

3. 无法修改 copy-webpack-plugin 插件的 to 属性来改变资源的保存路径

之前说过，想要修改 webpack 相关配置，需要使用 chainWebpack ，刚开始按照官网配置如下：

config.plugin('copy')
      .tap(args => {
        args[0].to = 'resource';
        return args;
      });
复制代码

无论如何配置不到，vue inspect 查看的配置一直是默认配置：

后来查看了 copy-webapck-plugin 插件的选项，才发现是自己的插件没有弄明白：

new CopyWebpackPlugin([patterns], options)
复制代码

有两个参数，第一个参数为数组，第二个为对象，是配置项，所以要修改第一项，其实是在修改一个二维数组，所以修改下配置：

config.plugin('copy')
      .tap(args => {
        args[0][0].to = 'resource';
        return args;
      });
复制代码

能正常修改配置：

未完待续...