如何在vue-cli3.0中自定css、js和圖片的打包路徑

這篇文章將為大家詳細(xì)講解有關(guān)如何在vue-cli3.0中自定css、js和圖片的打包路徑，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

分析

眾所周知，vue-cli3.0使用了webpack進(jìn)行打包處理，那么我們是否可以拿到目前打包默認(rèn)的一些webpack配置，并在這些配置中找到一些蛛絲馬跡，從而更改配置來(lái)實(shí)現(xiàn)對(duì)打包路徑的更改呢？

好在vue-cli3.0提供了這樣的功能！

我假設(shè)您已經(jīng)安裝了vue-cli3.0，那么打開(kāi)命令行，運(yùn)行一下命令：

vue ui

這個(gè)命令將會(huì)啟動(dòng)一個(gè)頁(yè)面，用來(lái)簡(jiǎn)化開(kāi)發(fā)過(guò)程中的一系列操作。

我們先導(dǎo)入當(dāng)前項(xiàng)目（自己摸索下，此處不展開(kāi)詳說(shuō)）。

我們進(jìn)入<任務(wù)>頁(yè)面，點(diǎn)擊inspect選項(xiàng)卡，并點(diǎn)擊運(yùn)行按鈕，將會(huì)得到該項(xiàng)目下所有的webpack配置項(xiàng)。

將這個(gè)配置復(fù)制到我們的編輯器中，然后我們查找路徑'js/', 'css/', 'img/'，將會(huì)看到這些路徑所配置的一些地方，我的項(xiàng)目中這些配置在以下部分：

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等等

那么問(wèn)題就簡(jiǎn)單了，我們更改掉這些webpack配置就可以了。

更改webpack配置

需要更改的webpack相關(guān)配置如下：

js路徑配置更改

js路徑更改output配置即可，output配置在configureWebpack配置項(xiàng)中進(jìn)行更改，因?yàn)関ue.config.js中對(duì)于configureWebpack選項(xiàng)的配置將會(huì)被merge到webpack配置中，所以更改該項(xiàng)配置即可，如下：

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

  },
}

更改MiniCssExtractPlugin插件配置

更改該配置需要先安裝MiniCssExtractPlugin插件到開(kāi)發(fā)依賴中，如下：

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

然后在vue.config.js文件中添加相關(guān)配置到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配置

更改該配置仍然需要將相關(guān)配置添加到chainWepack配置項(xiàng)中，如下：

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]'
      })
  },
}

結(jié)語(yǔ)

總的配置項(xiàng)如下所示：

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]'
      })

  },
}

這時(shí)，在運(yùn)行inspect檢查webpack配置，即可看到相關(guān)路徑前的css/，js/，img/等前綴已經(jīng)消失，快快打包嘗試吧！

關(guān)于“如何在vue-cli3.0中自定css、js和圖片的打包路徑”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。