vue优化初次进入项目长时间加载白屏问题-添加首屏加载

Sylvasylva

已于 2023-09-01 10:40:24 修改

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-12-15 11:22:00 首次发布

本文链接：https://blog.csdn.net/Sylvasylva/article/details/128327217

版权

本文介绍了如何解决Vue项目首次加载时由于资源过多导致的长时间白屏问题。通过添加首屏加载样式来提升用户体验，具体操作是在public/index.html文件中进行相关样式设置。

摘要由CSDN通过智能技术生成

在项目开发中可能会出现首次进入项目时由于加载资源较多出现长时间白屏的问题，通常会选择编写首屏加载的样式提升客户体验感，如下：

打开public/index.html，示例代码如下，具体样式可根据需求调整

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>//网站名称
    <style>
      html,
      body,
      //添加样式
      #app {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #Loading {
        top: 50