解決vue3打包過(guò)后空白頁(yè)面的情況
更新時(shí)間：2022年09月08日 16:05:29 作者：小菜鳥(niǎo)學(xué)代碼··
這篇文章主要介紹了解決vue3打包過(guò)后空白頁(yè)面的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue3打包過(guò)后空白頁(yè)面
在項(xiàng)目根目錄下，新建一個(gè)vue.config.js文件
module.exports = {
// 基本路徑
publicPath: './',
// 輸出文件目錄
outputDir: 'dist',
configureWebpack: {
externals: {
}
}
}
如果還是不可以，那么需要找到如下頁(yè)面：
vue3打包后部分頁(yè)面空白
問(wèn)題描述
在開(kāi)發(fā)模式下，使用命令npm run serve運(yùn)行可以正常顯示，但使用npm run bulid打包后打開(kāi)index.html文件發(fā)現(xiàn)顯示白屏，但是資源都能正常獲取，其他頁(yè)面也顯示正常。
問(wèn)題解決
查找了很長(zhǎng)時(shí)間。發(fā)現(xiàn)問(wèn)題是透明度的問(wèn)題，原來(lái)我在一個(gè)頁(yè)面設(shè)置的透明度為75%，但是打包后顯示則為1%，原因好像是預(yù)處理器無(wú)視了百分號(hào)，把75這個(gè)值clip到1%，因此無(wú)法顯示出來(lái)。
這里把opacity設(shè)置為小數(shù)，把75%設(shè)置為0.75重新打包即可正常顯示。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue為了增加列表渲染的功能，增加了一組觀察數(shù)組的方法，而且可以顯示一個(gè)數(shù)組的過(guò)濾或排序的副本。本文將詳細(xì)介紹Vue數(shù)組更新及過(guò)濾排序2017-08-08
這篇文章主要介紹了Element Card 卡片的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue?中?Promise?的then方法異步使用及async/await?異步使用總結(jié)
then?方法是?Promise?中?處理的是異步調(diào)用，異步調(diào)用是非阻塞式的，在調(diào)用的時(shí)候并不知道它什么時(shí)候結(jié)束，也就不會(huì)等到他返回一個(gè)有效數(shù)據(jù)之后再進(jìn)行下一步處理，這篇文章主要介紹了Vue?中?Promise?的then方法異步使用及async/await?異步使用總結(jié),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了基于vue-video-player自定義播放器的方法，主要是基于video.js開(kāi)發(fā)的vue-video-player的使用，以及如何操作video.js中的api。需要的朋友可以參考下2018-03-03
vue-router 源碼之實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 vue-router
這篇文章主要介紹了vue-router 源碼之實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 vue-router，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
Vue?UI創(chuàng)建項(xiàng)目詳細(xì)步驟
本文主要介紹了Vue?UI創(chuàng)建項(xiàng)目詳細(xì)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
vue中的 scoped 屬性,其實(shí)就是給每一個(gè)dom節(jié)點(diǎn)元素都添加了不重復(fù)的自定義屬性（如：data-v-6810cbe5）,本文給大家介紹vue中的scoped屬性相關(guān)知識(shí),感興趣的朋友一起看看吧2023-12-12
vue引入elementUi后打開(kāi)頁(yè)面報(bào)錯(cuò)Uncaught?TypeError的解決方式
這篇文章主要給大家介紹了關(guān)于vue引入elementUi后打開(kāi)頁(yè)面報(bào)錯(cuò)Uncaught?TypeError:?Cannot?read?properties?of?undefined(reading?‘prototype‘)的解決方式,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue?element-plus圖片預(yù)覽實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue?element-plus圖片預(yù)覽實(shí)現(xiàn)的相關(guān)資料,最近的項(xiàng)目中有圖片預(yù)覽的場(chǎng)景,也是踩了一些坑,在這里總結(jié)一下,需要的朋友可以參考下2023-07-07
使用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取的示例詳解
構(gòu)建現(xiàn)代大規(guī)模應(yīng)用程序最具挑戰(zhàn)性的方面之一是數(shù)據(jù)獲取,這也是?Vue?Query?庫(kù)的用途所在,下面就跟隨小編一起學(xué)習(xí)一下如何利用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取吧2023-08-08