解決vue3打包過后空白頁面的情況

更新時間：2022年09月08日 16:05:29 作者：小菜鳥學代碼··

這篇文章主要介紹了解決vue3打包過后空白頁面的情況，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue3打包過后空白頁面

在項目根目錄下，新建一個vue.config.js文件

module.exports = {
  // 基本路徑
  publicPath: './',
  // 輸出文件目錄
  outputDir: 'dist',
  configureWebpack: {
    externals: {
    }
  }
}

如果還是不可以，那么需要找到如下頁面：

在這里插入圖片描述

vue3打包后部分頁面空白

問題描述

在開發(fā)模式下，使用命令npm run serve運行可以正常顯示，但使用npm run bulid打包后打開index.html文件發(fā)現顯示白屏，但是資源都能正常獲取，其他頁面也顯示正常。

問題解決

查找了很長時間。發(fā)現問題是透明度的問題，原來我在一個頁面設置的透明度為75%，但是打包后顯示則為1%，原因好像是預處理器無視了百分號，把75這個值clip到1%，因此無法顯示出來。

這里把opacity設置為小數，把75%設置為0.75重新打包即可正常顯示。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

解決VUE中document.body.scrollTop為0的問題
今天小編就為大家分享一篇解決VUE中document.body.scrollTop為0的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue addRoutes實現動態(tài)權限路由菜單的示例
本篇文章主要介紹了vue addRoutes實現動態(tài)權限路由菜單的示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
VueJs使用Amaze ui調整列表和內容頁面
這篇文章主要介紹了VueJs 填坑日記之使用Amaze ui調整列表和內容頁面,需要的朋友可以參考下
2017-11-11
詳解用vue編寫彈出框組件
本篇文章主要介紹了詳解用vue編寫彈出框組件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
優(yōu)雅地使用loading(推薦)
這篇文章主要介紹了在Vue和React中如何優(yōu)雅地使用loading，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
詳解vuex 中的 state 在組件中如何監(jiān)聽
本篇文章主要介紹了詳解vuex 中的 state 在組件中如何監(jiān)聽，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
vue項目element?UI?版本升級過程遇到的問題及解決方案
這篇文章主要介紹了vue項目element?UI?版本升級過程遇到的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue路由傳參及獲取參數的方式總結
這篇文章主要介紹了vue路由傳參及獲取參數的方式總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue中使用[provide/inject]實現頁面reload的方法
這篇文章主要介紹了在vue中使用[provide/inject]實現頁面reload的方法，文中給大家提到了在vue中實現頁面刷新不同的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
vue如何清除瀏覽器歷史棧
這篇文章主要介紹了vue如何清除瀏覽器歷史棧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05