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

廣州品牌設計公司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]' }) }, }