vue打包靜態(tài)資源后顯示空白及static文件路徑報(bào)錯(cuò)的解決
今天使用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’,或者直接不寫(xiě) 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ì)處理這一類(lèi)的,所以打包后它圖片訪問(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>
補(bǔ)充知識(shí):vue打包后路徑多了個(gè)/css/static
vue打包后路徑多了個(gè)/css/static導(dǎo)致一些css屬性效果不顯示。
解決方法:
在build/utils.js文件中添加publicPath:’…/…/’,重新打包即可。
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' }); } else { return ['vue-style-loader'].concat(loaders); }
以上這篇vue打包靜態(tài)資源后顯示空白及static文件路徑報(bào)錯(cuò)的解決就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. Python+unittest+requests 接口自動(dòng)化測(cè)試框架搭建教程2. Python的文本常量與字符串模板之string庫(kù)3. 利用CSS制作3D動(dòng)畫(huà)4. 存儲(chǔ)于xml中需要的HTML轉(zhuǎn)義代碼5. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問(wèn)題6. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能(保存目錄改進(jìn))7. 一款功能強(qiáng)大的markdown編輯器tui.editor使用示例詳解8. .Net加密神器Eazfuscator.NET?2023.2?最新版使用教程9. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法10. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)
