前言

我們有時候因為一些特殊需求，可能需要將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'  },}