解决vue3打包过后空白页面的情况

更新时间：2022年09月08日 16:05:29 作者：小菜鸟学代码··

这篇文章主要介绍了解决vue3打包过后空白页面的情况，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue3打包过后空白页面

在项目根目录下，新建一个vue.config.js文件

module.exports = {
  // 基本路径
  publicPath: './',
  // 输出文件目录
  outputDir: 'dist',
  configureWebpack: {
    externals: {
    }
  }
}

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

在这里插入图片描述

vue3打包后部分页面空白

问题描述

在开发模式下，使用命令npm run serve运行可以正常显示，但使用npm run bulid打包后打开index.html文件发现显示白屏，但是资源都能正常获取，其他页面也显示正常。

问题解决

查找了很长时间。发现问题是透明度的问题，原来我在一个页面设置的透明度为75%，但是打包后显示则为1%，原因好像是预处理器无视了百分号，把75这个值clip到1%，因此无法显示出来。

这里把opacity设置为小数，把75%设置为0.75重新打包即可正常显示。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue数组更新及过滤排序功能
Vue为了增加列表渲染的功能，增加了一组观察数组的方法，而且可以显示一个数组的过滤或排序的副本。本文将详细介绍Vue数组更新及过滤排序
2017-08-08
Element Card 卡片的具体使用
这篇文章主要介绍了Element Card 卡片的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
then 方法是 Promise 中处理的是异步调用，异步调用是非阻塞式的，在调用的时候并不知道它什么时候结束，也就不会等到他返回一个有效数据之后再进行下一步处理，这篇文章主要介绍了Vue 中 Promise 的then方法异步使用及async/await 异步使用总结,需要的朋友可以参考下
2023-01-01
基于vue-video-player自定义播放器的方法
这篇文章主要介绍了基于vue-video-player自定义播放器的方法，主要是基于video.js开发的vue-video-player的使用，以及如何操作video.js中的api。需要的朋友可以参考下
2018-03-03
vue-router 源码之实现一个简单的 vue-router
这篇文章主要介绍了vue-router 源码之实现一个简单的 vue-router，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Vue UI创建项目详细步骤
本文主要介绍了Vue UI创建项目详细步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
深入理解vue中的scoped属性
vue中的 scoped 属性,其实就是给每一个dom节点元素都添加了不重复的自定义属性（如：data-v-6810cbe5）,本文给大家介绍vue中的scoped属性相关知识,感兴趣的朋友一起看看吧
2023-12-12
vue引入elementUi后打开页面报错Uncaught TypeError的解决方式
这篇文章主要给大家介绍了关于vue引入elementUi后打开页面报错Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype‘)的解决方式,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-08-08
vue element-plus图片预览实现方法
这篇文章主要给大家介绍了关于vue element-plus图片预览实现的相关资料,最近的项目中有图片预览的场景,也是踩了一些坑,在这里总结一下,需要的朋友可以参考下
2023-07-07
使用Vue Query实现高级数据获取的示例详解
构建现代大规模应用程序最具挑战性的方面之一是数据获取,这也是 Vue Query 库的用途所在,下面就跟随小编一起学习一下如何利用Vue Query实现高级数据获取吧
2023-08-08