前言

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

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

結語

總的配置項如下所示：

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

    },
}