VUE打包刪除文件、圖片的HASH碼

前言：vue打包的時(shí)候默認(rèn)是會(huì)加hash加密的，很多時(shí)候不能這樣，今天就遇到一個(gè)需求不要hash加密，很久沒(méi)弄了就記錄一下。

步驟

首先進(jìn)入：進(jìn)入項(xiàng)目-》build -》webpack.prod.conf.js 找到

filename: utils.assetsPath('js/[name].[chunkhash].js'),
filename: utils.assetsPath('css/[name].[contenthash].css'),

修改成：

filename: utils.assetsPath('js/[name].js'),
filename: utils.assetsPath('css/[name].css'),

好了，打包測(cè)試一下吧。

備注：在配置文件中還有一個(gè)chunkFilename，chunkFilename 沒(méi)有找到官方的具體說(shuō)明，大概就是在生成一些臨時(shí)文件時(shí)，會(huì)生成這種chunkFile，這些我們平時(shí)用不上，所以建議原生態(tài)比較好。

去掉map文件和圖片及其他靜態(tài)hash

（1）去掉.map文件

進(jìn)入項(xiàng)目目錄-》config -》 index.js 中設(shè)置：

productionSourceMap: false

（2）去掉臨時(shí)文件生成的hash加密：

注銷：

chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

改為

chunkFilename: utils.assetsPath('js/[id].js')

（3）去掉圖片及其他hash：

進(jìn)入build -》 webpack.base.conf.js

修改：

name: utils.assetsPath('img/[name].[hash:7].[ext]')

為

name: utils.assetsPath('img/[name].[ext]')

其他參考img方式去除就行，好了現(xiàn)在就可以去掉所有hash了。

VUE打包后遇到的坑

今天使用vue打包（npm run build）遇到了幾個(gè)坑，在這里分享給大家

打包之后打開(kāi)dist的頁(yè)面顯示空白

這個(gè)問(wèn)題以前就處理過(guò)，是打包過(guò)程中出現(xiàn)錯(cuò)誤頻率較高的一種，可能有3處地方會(huì)出現(xiàn)這種情況

1、記得改一下config下面的index.js中bulid模塊導(dǎo)出的路徑。因?yàn)榇虬蟮膇ndex.html里邊的內(nèi)容都是通過(guò)script標(biāo)簽引入的，默認(rèn)顯示的路徑不對(duì)，打開(kāi)肯定是空白的。

build: {
? ? index: path.resolve(__dirname, '../dist/index.html'),
? ? assetsRoot: path.resolve(__dirname, '../dist'),
? ? assetsSubDirectory: 'static',
? ? assetsPublicPath: '/',
? ? productionSourceMap: true,
? ? devtool: '#source-map',
? ? productionGzip: false,
? ? productionGzipExtensions: ['js', 'css'],
? ? bundleAnalyzerReport: process.env.npm_config_report
? }

這里需要將 assetsPublicPath: '/'改為assetsPublicPath: './',

2.src里邊router/index.js路由配置里邊默認(rèn)模式是mode:'hash'（頁(yè)面會(huì)在路由上加#），有時(shí)候改成了history（純凈路由）模式的話，打開(kāi)也會(huì)是一片空白。所以改為hash或者直接把模式配置刪除，讓它默認(rèn)的就行 。

export default new Router({
//mode: 'history',
mode:'hash',\\或者直接不寫
? routes: [{}]
)}

3.也有可能是因?yàn)楸尘皥D片路徑?jīng)]有配置需要在build/utils.js添加配置

publicPath: '../../'
if (options.extract) {
? ? ? return ExtractTextPlugin.extract({
? ? ? ? use: loaders,
? ? ? ? publicPath:'../../',
? ? ? ? fallback: 'vue-style-loader'
? ? ? })
? ? } else {
? ? ? return ['vue-style-loader'].concat(loaders)
? ? }

打包后找不到響應(yīng)路徑

這都是比較常見(jiàn)的幾種解決方式，如果將靜態(tài)資源的圖片路徑作為綁定數(shù)據(jù)以js引入，圖片放入了static里面用來(lái)引入這個(gè)頁(yè)面又該怎樣處理呢,如果以絕對(duì)路徑訪問(wèn)vue打包是不會(huì)處理這一類的，所以打包后它圖片訪問(wèn)的路徑不會(huì)更改，而打包后dist文件里就只有index.html和webpack不會(huì)處理的static文件夾（vue static/下的文件都不會(huì)被Webpack處理：它們使用相同的文件名，直接拷貝到最終的路徑）

解決方式有兩種：

1.如果要上線的話，需要將你的主域名加在static之前然后他會(huì)逐級(jí)去訪問(wèn)打包后的文件。

return {
?? ?isShow:true,
?? ?imgData:'',
?? ?myUpPic:'/yourDN/static/img/logo.png'
}

2.由于vue將組件訪問(wèn)靜態(tài)資源的路徑配置好了，你可以直接/static來(lái)找到static下的文件，但是這里的問(wèn)題就是你訪問(wèn)的時(shí)候它是逐級(jí)訪問(wèn)這些文件的，所以打包后他還是會(huì)找不到靜態(tài)資源的文件，在這里你就需要將/static改成./static，這樣的話他就會(huì)在打包后的文件夾下直接訪問(wèn)其之下的靜態(tài)資源文件夾。

return {
?? ?isShow:true,
?? ?imgData:'',
? ? //myUpPic:'/static/img/logo.png'?
?? ?myUpPic:'./static/img/logo.png'
}

以上就是個(gè)人處理vue打包bug的一些小經(jīng)驗(yàn)，希望這些能夠?qū)Υ蠹矣兴鶐椭?。也希望大家多多支持腳本之家。

最新評(píng)論