基于vue3 vue-cli4 线上部署及优化的问题

更新时间：2023年06月01日 09:53:32 作者：倪风6

这篇文章主要介绍了基于vue3 vue-cli4 线上部署及优化的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

起因

之前部署一直是直接使用docker在服务器上npm run serve直接运行，没出现什么问题，这次部署时真的难受到我了，第一次打开的速度真的慢的要死，首次加载至少要5s左右，这谁受得了，于是开始网上找教程

过程

开始使用 npm run build 打包项目，在dist目录下，我尝试在本地打开index.html。页面完全空白，打开控制台，发现全是关于

Failed to load resource: net::ERR_FILE_NOT_FOUND

的报错

找了相关教程，这个问题解决还是挺简单的，只需要在根目录下创建一个vue.config.js的文件，添加上以下内容，重新build就行了

module.exports = {
    publicPath: './',
};

接着，我把项目打包到服务器上，使用docker apache进行上线

docker run -p 80:80 -itd --name codetip_net_client  -v /root/codetip/client:/usr/local/apache2/htdocs httpd

我直接run了httpd服务，没有镜像他会自己自动拉取，映射了本地目录 /root/codetip/client，只需要将dist中的内容上传即可。

上线成功后，我发现，好了一点（可能是错觉），但是还是特别慢，于是继续找问题，最后发现，我们在build的时候，在js目录下，会自动创建很多map文件，一个js对应一个map，这个的作用主要是在我们开发过程中，给我们错误进行定位用的，比如某个地方报错了，他会给我们指出在第几行出现的问题，但我们的线上应用可用不着这个，只需要在上面说到的vue.config.js这个文件中再添加上一段下方的代码就行了

productionSourceMap: false, // 生产环境是否生成 sourceMap 文件

配置之后少了map文件，速度确实快了不少，不过，还是不满足，可其他网站比起来还是有些差距，继续优化

路由懒加载优化

在router/index.js中将由非懒加载改成懒加载。非懒加载的情况下，会将所有的配置文件都放到一个js文件中，导致这个文件非常大，每次首次请求都会先加载这个文件；而懒加载，创建多个js文件，相当于按需加载，每个页面加载对应的js文件

开启apache gzip

这需要vue项目和服务端项目都开启gzip

vue中安装：

npm install -D compression-webpack-plugin

接着在vue.config.js中添加以下代码即可

  configureWebpack: {
    plugins: [
        new CompressionPlugin({
            test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,//需要压缩的文件正则
            threshold: 10240,//文件大小大于这个值时启用压缩
            deleteOriginalAssets: false//压缩后保留原文件
        })
    ]
  }

我们之前使用的是docker的httpd，接下来我们开启他的gzip

先进入容器

docker exec -it codetip_net_client bash

容器初始化是没有编辑器的，这里我们先安装一个vim

apt update -y
apt install vim -y

接下来打开httpd的配置文件

vim /usr/local/apache2/conf/httpd.conf

打开以下两个文件的注释

LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so

接下来在文件最后添加上以下内容：

#使用<IfModule deflate_module> 和 <IfModule mod_deflate.c> 经过测试没什么区别
<IfModule deflate_module>
　　# 就像一个开关一样，告诉 Apache 对传输到浏览器的内容进行压缩
　　SetOutputFilter DEFLATE
　　# 压缩级别 9是最高级 1是最低级，不建议使用太高的压缩比，这样会对CPU产生太大的负担
　　DeflateCompressionLevel 9
</IfModule>
<IfModule mod_deflate.c>
    # 告诉 apache 对传输到浏览器的内容进行压缩
    SetOutputFilter DEFLATE
    # 压缩等级 9 最低是1，不建议按最大级别进行压缩，压缩率过高会占更多CPU资源
    DeflateCompressionLevel 9
    # 设置不对后缀gif，jpg，jpeg，png的图片文件进行压缩
    SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>
<IfModule mod_deflate.c>
    # 压缩等级 9
    DeflateCompressionLevel 9
    # 压缩类型 html、xml、php、css、js 面的文件MIME类型可以根据自己情况添加
    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-javascript application/x-httpd-php
    AddOutputFilter DEFLATE js css
</IfModule>

之后重启docker容器（或者重启apache）

docker stop codetip_net_client  
docker start codetip_net_client

开启之后，速度真的提升不止一点点

开启keep-alive

对于部分页面开启这个缓存功能有助于提升访问的效果，但值得注意的是，开启后我们需要将部分动态请求的数据转移到activated这个生命周期中，因为我们开启后，我们再请求同一个页面的时候，它默认只会执行activated这个生命周期中的内容，其他将调用缓存中的内容

添加首屏加载动画

这个功能是在我们第一次访问页面的时候出现的，相信很多人在项目搭建到服务器上的时候，会出现第一次打开白屏很久的这个问题，这是因为项目需要先请求到js和css等文件，请求完后才会渲染页面，为了解决这个问题，我在上面也说了很多方法，但总有那么一下白屏也是很难受的，所以我们可以在页面添加上一个加载功能，在项目中/public/index.html文件中添加上对应代码：

  <style>
    @-webkit-keyframes enter {
      0% {
        opacity: 0;
        top: -10px;
      }
      5% {
        opacity: 1;
        top: 0px;
      }
      50.9% {
        opacity: 1;
        top: 0px;
      }
      55.9% {
        opacity: 0;
        top: 10px;
      }
    }
    @keyframes enter {
      0% {
        opacity: 0;
        top: -10px;
      }
      5% {
        opacity: 1;
        top: 0px;
      }
      50.9% {
        opacity: 1;
        top: 0px;
      }
      55.9% {
        opacity: 0;
        top: 10px;
      }
    }
    @-moz-keyframes enter {
      0% {
        opacity: 0;
        top: -10px;
      }
      5% {
        opacity: 1;
        top: 0px;
      }
      50.9% {
        opacity: 1;
        top: 0px;
      }
      55.9% {
        opacity: 0;
        top: 10px;
      }
    }
    body {
      background: #f8f8f9;
    }
    #app-loader {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -27.5px;
      margin-top: -27.5px;
    }
    #app-loader .square {
      background: #2d8cf0;
      width: 15px;
      height: 15px;
      float: left;
      top: -10px;
      margin-right: 5px;
      margin-top: 5px;
      position: relative;
      opacity: 0;
      -webkit-animation: enter 6s infinite;
      animation: enter 6s infinite;
    }
    #app-loader .enter {
      top: 0px;
      opacity: 1;
    }
    #app-loader .square:nth-child(1) {
      -webkit-animation-delay: 1.8s;
      -moz-animation-delay: 1.8s;
      animation-delay: 1.8s;
    }
    #app-loader .square:nth-child(2) {
      -webkit-animation-delay: 2.1s;
      -moz-animation-delay: 2.1s;
      animation-delay: 2.1s;
    }
    #app-loader .square:nth-child(3) {
      -webkit-animation-delay: 2.4s;
      -moz-animation-delay: 2.4s;
      animation-delay: 2.4s;
      background: #ff9900;
    }
    #app-loader .square:nth-child(4) {
      -webkit-animation-delay: 0.9s;
      -moz-animation-delay: 0.9s;
      animation-delay: 0.9s;
    }
    #app-loader .square:nth-child(5) {
      -webkit-animation-delay: 1.2s;
      -moz-animation-delay: 1.2s;
      animation-delay: 1.2s;
    }
    #app-loader .square:nth-child(6) {
      -webkit-animation-delay: 1.5s;
      -moz-animation-delay: 1.5s;
      animation-delay: 1.5s;
    }
    #app-loader .square:nth-child(8) {
      -webkit-animation-delay: 0.3s;
      -moz-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }
    #app-loader .square:nth-child(9) {
      -webkit-animation-delay: 0.6s;
      -moz-animation-delay: 0.6s;
      animation-delay: 0.6s;
    }
    #app-loader .clear {
      clear: both;
    }
    #app-loader .last {
      margin-right: 0;
    }
    #app-loader .loader-content {
      color: #3498db;
      font-size: 16px;
      font-weight: 600;
    }
  </style>

    <div id="app-loader">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square last"></div>
    <div class="square clear"></div>
    <div class="square"></div>
    <div class="square last"></div>
    <div class="square clear"></div>
    <div class="square "></div>
    <div class="square last"></div>
    <div class="loader-content">
      <span>Loading...</span>
    </div>
  </div>

然后到我们APP.vue中添加上

这里的nextTick是为了在我们页面dom发生变化的时候执行，移除加载代码

import { nextTick } from "vue";
  nextTick(function () {
    try {
      document.body.removeChild(document.getElementById("app-loader"));
    } catch (e) {}
  });

效果：

因为服务器速度太快，只有一小会的显示

总结

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

您可能感兴趣的文章:

通用vue组件化展示列表数据实例详解
组件化开发能大幅提高应用的开发效率、测试性、复用性等,下面这篇文章主要给大家介绍了关于通用vue组件化展示列表数据的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-06-06
vue构建动态表单的方法示例
这篇文章主要介绍了vue构建动态表单的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
解决运行vue项目内存溢出问题
这篇文章主要介绍了解决运行vue项目内存溢出问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
一文详解Vue 的双端 diff 算法
这篇文章主要介绍了一文详解Vue 的双端 diff 算法，diff 算法是渲染器中最复杂的部分，也是面试的热点问题。今天我们就通过 Vue 的 diff 算法来探究下diff 算法吧
2022-06-06
解析Vue.use()是干什么的
今天通过本文给大家分享Vue.use是什么，主要包括vueEsign 插件的install是什么，element-ui的install是什么，为什么有的库就不需要使用Vue.use，对vue.use()相关知识感兴趣的朋友一起看看吧
2022-06-06
在vant 中使用cell组件定义图标该图片和位置操作
这篇文章主要介绍了在vant 中使用cell组件定义图标该图片和位置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vite5+vue3+ import.meta.glob动态导入vue组件图文教程
import.meta.glob是Vite提供的一个特殊功能,它允许你在模块范围内动态地导入多个模块,这篇文章主要给大家介绍了关于vite5+vue3+ import.meta.glob动态导入vue组件的相关资料,需要的朋友可以参考下
2024-07-07
vue+elementui实现表格多级表头效果
这篇文章主要为大家详细介绍了vue + elementui实现表格多级表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue地区选择组件教程详解
这篇文章主要介绍了vue地区选择组件主要用于全国地区数据的操作，包括省，市，区三级联动，地区数据的添加和删除,本文重点给大家介绍vue地区选择组件教程详解，需要的朋友参考下吧
2018-05-05
vue3 逻辑复用的实现示例
在项目开发中,有两个功能特别类似,如果单独实现,会有很多重复的代码，这时候就会用到逻辑复用，本文主要介绍了vue3 逻辑复用的实现示例，具有一定的参考价值，感兴趣的可以了解一下
2024-02-02