详解在vue-cli3.0中自定css、js和图片的打包路径

前言

我们有时候因为一些特殊需求，可能需要将js/css/img等资源文件都打包到根路径下，但vue-cli3.0的路径配置中仅有 assetsDir配置项能够配置所有的静态文件所在的文件夹，并不能针对css/js/img等资源文件分别来做设置，那么请看我如何尝试的吧！

分析

众所周知，vue-cli3.0使用了webpack进行打包处理，那么我们是否可以拿到目前打包默认的一些webpack配置，并在这些配置中找到一些蛛丝马迹，从而更改配置来实现对打包路径的更改呢？

好在vue-cli3.0提供了这样的功能！

我假设您已经安装了vue-cli3.0，那么打开命令行，运行一下命令：

vue ui

这个命令将会启动一个页面，用来简化开发过程中的一系列操作。

我们先导入当前项目（自己摸索下，此处不展开详说）。

我们进入<任务>页面，点击inspect选项卡，并点击运行按钮，将会得到该项目下所有的webpack配置项。

将这个配置复制到我们的编辑器中，然后我们查找路径\’js/\’, \’css/\’, \’img/\’，将会看到这些路径所配置的一些地方，我的项目中这些配置在以下部分：

output配置为：

output: {
  path: \'xxx\',
  filename: \'js/[name].[contenthash:8].js\',
  publicPath: \'\',
  chunkFilename: \'js/[name].[contenthash:8].js\'
}

plugin配置为：

/* config.plugin(\'extract-css\') */
new MiniCssExtractPlugin(
  {
  filename: \'css/[name].[contenthash:8].css\',
  chunkFilename: \'css/[name].[contenthash:8].css\'
  }
),

loader配置为：

/* config.module.rule(\'images\') */
{
  test: /\\.(png|jpe?g|gif|webp)(\\&;.*)?$/,
  use: [
    /* config.module.rule(\'images\').use(\'url-loader\') */
    {
    loader: \'url-loader\',
    options: {
      limit: 4096,
      fallback: {
      loader: \'file-loader\',
      options: {
        name: \'img/[name].[hash:8].[ext]\'
      }
      }
    }
    }
  ]
},
/* config.module.rule(\'svg\') */
{
  test: /\\.(svg)(\\&;.*)?$/,
  use: [
    /* config.module.rule(\'svg\').use(\'file-loader\') */
    {
    loader: \'file-loader\',
    options: {
      name: \'img/[name].[hash:8].[ext]\'
    }
    }
  ]
},

// 其他类型资源的loader等等

那么问题就简单了，我们更改掉这些webpack配置就可以了。

更改webpack配置

需要更改的webpack相关配置如下：

js路径配置更改

js路径更改output配置即可，output配置在configureWebpack配置项中进行更改，因为vue.config.js中对于configureWebpack选项的配置将会被merge到webpack配置中，所以更改该项配置即可，如下：

module.exports = {
  configureWebpack: config => {
    // js output config
    config.output.filename = \'[name].[contenthash:8].js\'
    config.output.chunkFilename = \'[name].[contenthash:8].js\'

  },
}

更改MiniCssExtractPlugin插件配置

更改该配置需要先安装MiniCssExtractPlugin插件到开发依赖中，如下：

npm install --save-dev mini-css-extract-plugin
# 或者
yarn add mini-css-extract-plugin --dev

然后在vue.config.js文件中添加相关配置到chainWebpack即可，如下所示：

module.exports = {
  chainWebpack: config => {
    // css output config
    let miniCssExtractPlugin = new MiniCssExtractPlugin(
      {
        filename: \'[name].[contenthash:8].css\',
        chunkFilename: \'[name].[contenthash:8].css\'
      }
    )
    config.plugin(\'extract-css\').use(miniCssExtractPlugin)
  },
}

更改各种资源loader配置

更改该配置仍然需要将相关配置添加到chainWepack配置项中，如下：

module.exports = {
  chainWebpack: config => {
    // image output config
    config.module.rule(\'images\')
      .test(/\\.(png|jpe?g|gif|webp)(\\&;.*)?$/)
      .use(\'url-loader\')
      .loader(\'file-loader\')
      .options({
        name: \'[name].[hash:8].[ext]\'
      })
    config.module.rule(\'svg\')
      .test(/\\.(svg)(\\&;.*)?$/)
      .use(\'file-loader\')
      .loader(\'file-loader\')
      .options({
        name: \'[name].[hash:8].[ext]\'
      })
  },
}

结语

总的配置项如下所示：

module.exports = {
  configureWebpack: config => {
    // js output config
    config.output.filename = \'[name].[contenthash:8].js\'
    config.output.chunkFilename = \'[name].[contenthash:8].js\'

  },
  chainWebpack: config => {
    // css output config
    let miniCssExtractPlugin = new MiniCssExtractPlugin(
      {
        filename: \'[name].[contenthash:8].css\',
        chunkFilename: \'[name].[contenthash:8].css\'
      }
    )
    config.plugin(\'extract-css\').use(miniCssExtractPlugin)

    // image output config
    config.module.rule(\'images\')
      .test(/\\.(png|jpe?g|gif|webp)(\\&;.*)?$/)
      .use(\'url-loader\')
      .loader(\'file-loader\')
      .options({
        name: \'[name].[hash:8].[ext]\'
      })
    config.module.rule(\'svg\')
      .test(/\\.(svg)(\\&;.*)?$/)
      .use(\'file-loader\')
      .loader(\'file-loader\')
      .options({
        name: \'[name].[hash:8].[ext]\'
      })

  },
}

这时，在运行inspect检查webpack配置，即可看到相关路径前的css/，js/，img/等前缀已经消失，快快打包尝试吧！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。