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

打包和优化

news 2026/4/2 23:31:51

私人博客

许小墨の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

用MATLAB搞定模电实验：单管共射放大电路静态工作点与放大倍数的保姆级仿真

MATLAB仿真单管共射放大电路&#xff1a;从理论到实践的完整指南 引言 在电子工程领域&#xff0c;单管共射放大电路是模拟电路设计的基石之一。传统实验教学中&#xff0c;学生往往需要花费大量时间搭建实体电路、调整参数并测量数据&#xff0c;这不仅效率低下&#xff0c;…...

编程新知 2026/4/2 22:48:23

从点云数据到3D实例分割：手把手带你跑通Mask3D在S3DIS数据集上的完整流程

从点云数据到3D实例分割&#xff1a;手把手带你跑通Mask3D在S3DIS数据集上的完整流程 在三维视觉领域&#xff0c;点云实例分割一直是极具挑战性的任务。想象一下&#xff0c;当你面对一个杂乱无章的办公室场景点云数据时&#xff0c;如何让算法不仅能识别出桌椅、电脑等物体&a…...

编程新知 2026/4/2 22:34:07

Windows右键菜单瘦身秘籍：3个技巧让你的文件操作快如闪电

Windows右键菜单瘦身秘籍&#xff1a;3个技巧让你的文件操作快如闪电 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否经历过这样的尴尬时刻&#xff1f;在…...

编程新知 2026/4/2 22:11:46

为什么选择Clasp？10个理由让你彻底爱上本地开发Apps Script [特殊字符]

为什么选择Clasp&#xff1f;10个理由让你彻底爱上本地开发Apps Script &#x1f680; 【免费下载链接】clasp &#x1f517; Command Line Apps Script Projects 项目地址: https://gitcode.com/gh_mirrors/clasp/clasp Clasp&#xff08;Command Line Apps Script Pro…...

编程新知 2026/4/2 21:28:52

护网行动入门指南：零基础也能参与，快速积累网安实战经验

护网行动入门指南&#xff1a;如何参与并积累实战经验 护网行动是国内最高规格的网络安全实战演练&#xff0c;旨在检验企业、单位的网络安全防御能力&#xff0c;现已成为网络安全领域的“实战练兵场”。对计算机专业学生而言&#xff0c;参与护网行动不仅能积累宝贵的实战经…...

编程新知 2026/4/2 21:22:46

终极指南：如何用KCN-GenshinServer轻松搭建原神私服

终极指南&#xff1a;如何用KCN-GenshinServer轻松搭建原神私服 【免费下载链接】KCN-GenshinServer 基于GC制作的原神一键GUI多功能服务端。 项目地址: https://gitcode.com/gh_mirrors/kc/KCN-GenshinServer 还在为复杂的命令行配置而头疼吗&#xff1f;KCN-GenshinSe…...

编程新知 2026/4/2 21:16:40

告别内置数据库：NocoBase企业级部署为何推荐外接MySQL？实战配置详解

企业级NocoBase部署&#xff1a;为什么外接MySQL是必选项&#xff1f; 当技术团队从原型验证转向生产环境部署时&#xff0c;数据库选型往往成为第一个关键决策点。NocoBase作为企业级无代码平台&#xff0c;虽然内置了开箱即用的SQLite数据库&#xff0c;但在真实业务场景中&a…...

编程新知 2026/4/2 19:35:39

解锁Unity游戏插件开发：从概念到实战的MelonLoader全攻略

解锁Unity游戏插件开发&#xff1a;从概念到实战的MelonLoader全攻略 【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader 一、认知篇…...

编程新知 2026/4/2 18:10:15

突破城市交通治理瓶颈：SZT-bigdata实时客流分析系统的技术革新与实战价值

突破城市交通治理瓶颈&#xff1a;SZT-bigdata实时客流分析系统的技术革新与实战价值 【免费下载链接】SZT-bigdata 深圳地铁大数据客流分析系统&#x1f687;&#x1f684;&#x1f31f; 项目地址: https://gitcode.com/gh_mirrors/sz/SZT-bigdata 深圳地铁大数据客流分…...

编程新知 2026/4/2 17:59:52

效率提升300%：OpenClaw+Phi-3-vision-128k-instruct重构我的学术工作流

效率提升300%&#xff1a;OpenClawPhi-3-vision-128k-instruct重构我的学术工作流 1. 从手动到自动的学术工作流革命 作为一名每天需要处理大量文献、实验数据和演示材料的科研工作者&#xff0c;我曾经花费近40%的工作时间在重复性文档处理上——截图标注、图表整理、笔记归…...

编程新知 2026/4/2 17:27:18