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

打包和优化

news 2026/2/5 6:16:39

私人博客

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

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/12/16 4:45:38

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2026/1/29 5:29:57

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2026/2/1 3:12:03

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2026/1/26 8:13:33

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

编程新知 2026/1/31 4:40:38

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2026/2/2 16:55:46

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

编程新知 2025/9/30 22:37:58

【C++】纯虚函数类外可以写实现吗？

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

编程新知 2026/2/4 1:25:22