前言
我們有時候因為一些特殊需求，可能需要將js/css/img等資源文件都打包到根路徑下，但vue-cli3.0的路徑配置中僅有 assetsDir配置項能夠配置所有的靜態(tài)文件所在的文件夾，并不能針對css/js/img等資源文件分別來做設(shè)置，那么請看我如何嘗試的吧！
分析
眾所周知，vue-cli3.0使用了webpack進(jìn)行打包處理，那么我們是否可以拿到目前打包默認(rèn)的一些webpack配置，并在這些配置中找到一些蛛絲馬跡，從而更改配置來實現(xiàn)對打包路徑的更改呢？
好在vue-cli3.0提供了這樣的功能！
我假設(shè)您已經(jīng)安裝了vue-cli3.0，那么打開命令行，運行一下命令：
vue ui
這個命令將會啟動一個頁面，用來簡化開發(fā)過程中的一系列操作。
我們先導(dǎo)入當(dāng)前項目（自己摸索下，此處不展開詳說）。
我們進(jìn)入<任務(wù)>頁面，點擊inspect選項卡，并點擊運行按鈕，將會得到該項目下所有的webpack配置項。
將這個配置復(fù)制到我們的編輯器中，然后我們查找路徑'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相關(guān)配置如下：
js路徑配置更改
js路徑更改output配置即可，output配置在configureWebpack配置項中進(jìn)行更改，因為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插件到開發(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配置項中，如下：
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é)語
總的配置項如下所示：
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配置，即可看到相關(guān)路徑前的css/，js/，img/等前綴已經(jīng)消失，快快打包嘗試吧！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
