詳解在vue-cli3.0中自定css、js和圖片的打包路徑
前言
我們有時候因為一些特殊需求，可能需要將js/css/img等資源文件都打包到根路徑下，但vue-cli3.0的路徑配置中僅有 assetsDir配置項能夠配置所有的靜態(tài)文件所在的文件夾，并不能針對css/js/img等資源文件分別來做設置，那么請看我如何嘗試的吧！
分析
眾所周知，vue-cli3.0使用了webpack進行打包處理，那么我們是否可以拿到目前打包默認的一些webpack配置，并在這些配置中找到一些蛛絲馬跡，從而更改配置來實現(xiàn)對打包路徑的更改呢？
好在vue-cli3.0提供了這樣的功能！
我假設您已經(jīng)安裝了vue-cli3.0，那么打開命令行，運行一下命令：
vue ui
這個命令將會啟動一個頁面，用來簡化開發(fā)過程中的一系列操作。
我們先導入當前項目（自己摸索下，此處不展開詳說）。
我們進入<任務>頁面，點擊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插件到開發(fā)依賴中，如下：
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]'
})
},
}
結語
總的配置項如下所示：
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配置，即可看到相關路徑前的css/，js/，img/等前綴已經(jīng)消失，快快打包嘗試吧！
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue3項目pc端瀏覽器樣式正常但移動端部分樣式失效問題的解決方法
這篇文章主要介紹了Vue3項目pc端瀏覽器樣式正常但移動端部分樣式失效問題的解決方法,文中通過圖文講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue地址欄直接輸入路由無效問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了淺談Vue路由快照實現(xiàn)思路及其問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細介紹了vue前后分離調(diào)起微信支付，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了vue webpack多頁面構建的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue keep-alive中的生命周期,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了el-select組件綁定change事件的踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
將 unix 時間戳轉換為日期時間和使用日期時間轉換為 unix 時間戳,在項目中常常用到,其中vue中的moment庫很是方便,下面小編就來為大家講講具體使用吧2023-09-09
最近公司項目有個導出ppt的功能,在使用ppexgen.js一周完成功能之后,這篇文章主要給大家介紹了關于前端vue如何使用pptxgen.js導出PPT的相關資料,需要的朋友可以參考下2024-01-01
Vue通過Object.defineProperty來實現(xiàn)監(jiān)聽數(shù)據(jù)的改變和讀?。▽傩灾械膅etter和setter方法） 實現(xiàn)數(shù)據(jù)劫持。下面簡單記錄一下，vue監(jiān)聽數(shù)據(jù)變化的原理2023-01-01