当前位置： 首页 > news >正文

打包和优化

news 2025/11/3 9:34:33

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
后端系列文章——传送门

文章目录

  • 私人博客
  • 系列文章目录
  • 项目打包
    • 一、打包介绍
    • 二、打包优化
    • 三、制作APP
    • 注

项目打包

一、打包介绍

我们知道vue项目中有后缀为.vue的文件，是无法直接运行在浏览器中的。在开发中能在浏览器中打开，是因为vue项目中内置了编译的功能，将整个项目进行编译，然后引入到public的index.html文件中，然后通过服务器打开的。

编译的结果在内存中，并没有保存下来，因为处于开发过程中，所以需要时常进行调试，就不保存在磁盘中了。

当项目完成后，我们就需要将整个项目编译生成文件，才能上传到服务器上进行上线。

vue项目搭建好之后，vue就提供了两个命令：

  • 开发阶段在浏览器中查看页面的命令
  • 开发完成后，将整个项目打包成实际文件的命令

命令在package.json中

所以在我们项目完成后，就需要使用下面的build命令进行打包：

npm run build

在项目根目录下，会生成一个dist文件夹，用于存放打包后的所有文件

其中的文件结构如下：

最终打包后的项目文件包含：css、js、图片、index.html、网站图标。

我们平常在浏览器上看到的其实就是dist中的index.html，其中的样式是引入css文件夹中的css文件，其中的功能以及我们写的js代码都在js文件夹下的js文件中，项目中用到的静态资源图片，都在img文件夹中。

在我们项目中用到了很多服务器的操作，例如发送请求等，所以dist文件夹中的index.html直接在浏览器中打开是无法正常运行的，我们需要将整个文件夹作为服务器根目录打开才行，例如通过http-server工具。

打包后的js文件有两个：

引入外部的js代码中，包含我们通过npm下载的vue、vuex、vue-router、axios、swiper等文件。

项目使用的外部代码较多的话，打包后的这个js文件甚至能达到几十MB大小。

为了打包后的js文件体积变小，通常需要进行打包优化。

二、打包优化

优化思路：

将外部引入的这些文件，使用cdn的链接来代替，打包时，配置项目不打包这些js文件，从而减小打包后的js文件体积。

具体做法：

  1. 配置打包忽略

    在vue.config.js文件中，新增键值对：

    其中的key，代表我们要忽略打包的模块名称；value代表这个模块在项目中用的是什么名字。

  2. 在public下的index.html中引入被忽略的文件的cdn链接

    <!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"><link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.4.5/swiper-bundle.min.css" rel="stylesheet"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.1/vue-router.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.1/axios.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"></script></body>
</html>

然后重新进行打包，打包结果：

两相对比，体积小了，且所需时间也短了，dist中的文件还是可以正常运行的。

三、制作APP

因为我们做的是移动端app项目，所以最终可以将这个项目打包成手机APP使用。

打包工具使用HBuilder。

打包具体步骤：

  1. 在HBuilder中新建一个项目

  2. 将新项目中的css、js、img、index.html删除，放入dist下的所有文件

  3. 在发行菜单中选择原生APP-云打包

  4. 在打开的菜单中，选择或输入自己的内容：

最后点击打包，等待几分钟，打包成功后，可以从项目的 unpackage\release\apk 文件夹中，找到对应的apk，传递到手机上安装即可使用。

过程简单，但是有一定的前提和注意事项：

不要急着打包，项目中有些代码放在手机APP中无法正常运行，所以需要修改：

  • 手机APP无法使用cookie，需要换成本地存储，所以需要将封装好的cookie.js中的代码改成本地存储的操作

    export function setCookie(key, value, seconds, path = '/') {// var date = new Date()// date.setTime(date.getTime() - 8*3600*1000 + seconds * 1000)// document.cookie = key + '='+value+';expires='+date+';path=' + pathlocalStorage.setItem(key, value)
}export function getCookie(key) {// var cookies = document.cookie // 所有cookie == 'key=value; key=value; key=value'// if(!cookies) return// var arr = cookies.split('; ')// for(var a = 0; a < arr.length; a++) {//     var brr = arr[a].split('=')//     if(brr[0] === key) {//         return brr[1]//     }// }return localStorage.getItem(key)
}export function removeCookie(key, path = '/') {// setCookie(key, null, -1, path)localStorage.removeItem(key)
}

  • 项目需要用到数据服务器，所以手机和电脑要保持同一个网段（连接同一个路由器的wifi），数据服务器json-server需要重新制定ip地址启动：

    然后修改axios.js中的baseURL：

  • data.json文件中，有些视屏的链接，少写了协议和冒号，需要补全

  • 打包后的index.html引入静态资源的链接，是以/开头的，需要在打包前配置，使用./才能用：

  • 打包的时候，需要有打包的账号和密码

    网址：https://dev.dcloud.net.cn/pages/app/list，如果没有账号，需要先注册账号，并实名认证

    如果打包提示，通讯录权限问题，需要修改打包权限配置：

    打包时选择修改mainfest配置，

    打开配置后，选择权限配置，

    滚动条滚动到通讯配置，取消选中，

    然后记得ctrl+s保存。

    接下来重新再次打包。

HBuilder打包手机APP是免费的，但一天仅限5次，次数要再多就需要花钱。

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog

相关文章：

打包和优化

私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版&#xff0c;配图更多&#xff0c;CSDN博文图片需要手动上传&#xff0c;因此文章配图较少&#xff0c;看不懂的可以去菜鸡博客参考一下配图&#xff01; 系列文章目录 前端系列文章——传送门 后端系列文章——传送…...

编程日记 2023/6/4 5:03:28

linuxOPS基础_Linux文件管理

Linux下文件命名规则 可以使用哪些字符&#xff1f; 理论上除了字符“/”之外&#xff0c;所有的字符都可以使用&#xff0c;但是要注意&#xff0c;在目录名或文件名中&#xff0c;不建议使用某些特殊字符&#xff0c;例如&#xff0c; <、>、&#xff1f;、* 等&…...

编程日记 2023/6/4 4:58:26

C语言——数据在内存中的存储（上）

数据在内存中的存储 1. 数据类型的介绍 之前已经介绍过C语言中的基本数据类型了&#xff0c;主要有&#xff1a; char //字符数据类型short //短整型int //整形long //长整型long long //更长的整形float //单精度浮点数double //双精度浮点数 注意&#xff1a;C语言中是是没…...

编程日记 2023/6/4 4:53:25

LinkedIn 国际版怎么在国内登录?怎么使用领英国际版？

自从去年底国内用户使用LinkedIn就只能跳转到领英职场&#xff0c;而且就只是一个简单的招聘求职平台&#xff0c;没办法搜索添加国外客户&#xff0c;开发客户资源的效率大打折扣。但是国际版领英就不受影响&#xff0c;东哥今天就给各位做外贸的朋友分享如何使用国际版领英。…...

编程日记 2023/6/4 4:48:21

QThread Class

QThread QThread类枚举类型成员函数可重写函数公共槽信号静态成员函数保护函数静态保护函数QThread简单案例1QThread简单案例2 QThread类 标准头文件&#xff1a;#include <QThread> qmake: QT core 继承(父): QObject枚举类型 线程的优先级 enum Priority { IdlePri…...

编程日记 2023/6/4 4:43:20

C语言中的运算符及其优先级详解

引言&#xff1a; 在C语言中&#xff0c;运算符是用于进行各种数学和逻辑运算的符号。了解不同类型的运算符及其优先级对于正确理解和编写C语言代码至关重要。本文将详细介绍C语言中常用的运算符&#xff0c;包括算术运算符、赋值运算符、比较运算符、逻辑运算符等&#xff0c;…...

编程日记 2023/6/4 4:38:19

【C语言】语言篇——数组和字符串

C站的小伙伴们&#xff0c;大家好呀&#x1f61d;&#x1f61d;&#xff01;我最近在阅读学习刘汝佳老师的《算法竞赛入门经典》&#xff0c;今天将整理本书的第三章——数组和字符串的一些习题&#xff0c;本章习题较多&#xff0c;下选取部分习题进行练习总结&#xff0c;在这…...

编程日记 2023/6/4 4:33:18

Js写的二级联动和三级联动

二级联动的实现 第一步 在HTML页面创建两个 select 下拉列表元素&#xff0c;并设置id为 ‘province’和id ‘city’ <!--省份--> <select id"province" onchange"getCity()"></select><!--城市--> <select id"city&qu…...

编程日记 2023/6/4 4:28:17

一文带你了解UI自动化测试框架

PythonSeleniumUnittestDdtHTMLReport分布式数据驱动自动化测试框架结构 1、Business&#xff1a;公共业务模块&#xff0c;如登录模块&#xff0c;可以把登录模块进行封装供调用 ------login_business.py from Page_Object.Common_Page.login_page import Login_Page from H…...

编程日记 2023/6/4 4:23:16

【Linux】守护进程

守护进程&#xff08;Daemon&#xff09;是一种在后台运行的特殊进程。它通常在操作系统启动时启动&#xff0c;并一直运行直至系统关闭。它不与任何终端关联&#xff0c;并且没有标准输入、输出和错误流。它的主要作用是在系统启动后执行一些特定的任务或者提供某些服务&#…...

编程日记 2023/6/4 4:18:15

Vue中组件和插件有什么区别？

Vue中组件和插件有什么区别&#xff1f; 组件是什么 组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念&#xff08;组件&#xff09;来实现开发的模式&#xff0c;在Vue中每一个.vue文件都可以视为一个组件 组件的优势 降低整个系统的耦合度&#xff0c;在保持接口…...

编程日记 2023/6/4 4:13:14

第五章 图像处理

文章目录 前言一、图像金字塔1.高斯金字塔2.拉普拉斯金字塔 二、图像轮廓1. 轮廓提取2. 轮廓绘制3. 轮廓特征4. 轮廓近似5. 轮廓标记 三、模板匹配四、直方图1. 对比度2. 绘制直方图3. 均衡化3.1 理论3.2 代码 4. CLAHE 五、图像傅里叶变换5.1 正弦平面波5.2 二维傅里叶变换5.3…...

编程日记 2023/6/4 4:08:13

算法8.从暴力递归到动态规划1

算法|8.从暴力递归到动态规划1 目前感觉&#xff0c;背包问题和货币数组问题本质相同&#xff0c;货币的与dp相关的三种代码写完了&#xff0c;快复习不完了&#xff0c;背包暂时先不写了&#xff0c;回头再写&#xff0c;补充&#xff0c;再总结&#xff0c;结合那个C大神的文…...

编程日记 2023/6/4 4:03:12

8-JDBC 编程

目录 1.数据库编程的必备条件 PS&#xff1a;程序是怎么操作数据库的&#xff1f; 2.什么是JDBC&#xff1f; 2.1.JDBC定义 2.2.JDBC工作原理 3.JDBC使用 3.1.创建项目并添加MySQL驱动包 3.2.使用代码操作数据库 3.2.1.获得数据源 3.2.2.获得连接 3.2.3.获得执行器 …...

编程日记 2023/6/4 3:58:11

零基础如何学习 Web 安全？

Web安全不仅是互联网的核心&#xff0c;而且还是云计算和移动互联网的最佳载体。对于信息安全从业者而言&#xff0c;Web安全是一个非常重要的研究课题之一。 Web应用是指采用B/S架构、通过HTTP/HTTPS协议提供服务的统称。随着互联网的广泛使用&#xff0c;社交网络、聊天工具…...

编程日记 2023/6/4 3:53:10

【简单实用框架】【AddressablesMgr】【可移植】

☀️博客主页&#xff1a;CSDN博客主页&#x1f4a8;本文由 萌萌的小木屋 原创&#xff0c;首发于 CSDN&#x1f4a2;&#x1f525;学习专栏推荐&#xff1a;面试汇总❗️游戏框架专栏推荐&#xff1a;游戏实用框架专栏⛅️点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd;&#…...

编程日记 2023/6/4 3:48:09

android 12.0Launcher3禁止拖拽app图标到第一屏

1.概述 在12.0进行定制化开发Launcher3中，会对Launcher3 做些要求，比如现在的需求就是Launcher3第一屏的图标固定，不让其他屏的图标拖动到 第一屏所以说这个需求和 禁止拖拽图标到Hotseat类似，也是从WorkSpace.java里面寻找解决方案 2.Launcher3禁止拖拽app图标到第一屏相…...

编程日记 2023/6/4 3:43:08

SkyLine简介

简介 SkyLine产品系列&#xff08;TerraExplorer 、TerraGate、TerraBuilder&#xff09;是一套优秀的三维数字地球平台软件。凭借其国际领先的三维数字化显示技术&#xff0c;它可以利用海量的遥感航测影像数据、数字高程数据以及其他二三维数据搭建出一个对真实世界进行模拟…...

编程日记 2023/6/4 3:38:07

算法基础学习笔记——④前缀和\差分\双指针\位运算

✨博主&#xff1a;命运之光 ✨专栏&#xff1a;算法基础学习 目录 ✨前缀和 ✨一维前缀和 &#x1f353;一维前缀和模板&#xff1a; ✨二维前缀和 &#x1f353;二位前缀和模板&#xff1a; 前言&#xff1a;算法学习笔记记录日常分享&#xff0c;需要的看哈O(∩_∩)O&a…...

编程日记 2023/6/4 3:33:06

【Linux系统基础快速入门详解】Linux下安装软件必知必会4种方法(yum,编译安装,rpm包,二进制方式)等详解

在 Linux 下安装软件有多种方法可供选择，常用的包括 yum、编译安装、rpm 包和二进制方式。下面对这些方法进行详细说明： 使用 yum 安装软件yum 是 Red Hat 系列 Linux 发行版中常用的软件包管理工具，通过 yum 可以方便地安装、升级和删除软件包。yum 默认从官方仓库中下载软…...

编程日记 2023/6/4 3:28:05

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/10/30 18:21:38

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/11/1 10:07:23

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/10/30 6:37:10

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/10/16 23:42:48

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/10/31 17:03:04

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2025/10/27 13:40:36

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/10/30 5:11:46

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/10/30 5:10:41

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/11/2 8:55:05