uni-app学习笔记十八--uni-app static目录简介

本笔记内容摘录自工程简介 | uni-app官网

一个 uni-app 工程,就是一个 Vue 项目,在完成uni-app项目创建后,会生成一个static目录,

  • 为什么需要static这样的目录?

uni-app编译器根据pages.json扫描需要编译的页面,并根据页面引入的js、css合并打包文件。

对于本地的图片、字体、视频、文件等资源,如果可以直接识别,那么也会把这些资源文件打包进去 ,但如果这些资源以变量的方式引用, 比如:<image :src="url"></image>,甚至可能有更复杂的函数计算,此时编译器无法分析。

那么有了static目录,编译器就会把这个目录整体复制到最终编译包内。这样只要运行时确实能获取到这个图片,就可以显示。

当然这也带来一个注意事项,如果static里有一些没有使用的废文件,也会被打包到编译包里,造成体积变大。

另外注意,static目录支持特殊的平台子目录,比如web、app、mp-weixin等,这些目录存放专有平台的文件,这些平台的文件在打包其他平台时不会被包含。详见条件编译

非 static 目录下的文件(vue组件、js、css 等)只有被引用时,才会被打包编译。

**css、less/scss 等资源不要放在 static 目录下,建议这些公用的资源放在自建的 common 目录下。**所以注意控制static目录的大小,太大的static目录和太多文件,会造成App安装后第一次启动变慢。

相关推荐
滕州市燕猫虎计算机科技工作室个体工商户1 小时前
《Rust程序设计》学习笔记八:结构体
笔记·学习·rust·rust程序设计
别动我齐刘海2 小时前
Linux 系统调试学习1
linux·运维·服务器·c++·学习·机器学习·机器人
志尊宝3 小时前
Vue3 零基础每日笔记(082):文件上传实战——el-upload 校验、自定义上传、头像预览
前端·javascript·vue.js·笔记·#javascript·#vue.js
后季暖4 小时前
电商问数笔记(2)
笔记
xier_ran4 小时前
【infra之路】AI 编译器学习笔记(二):重拾 C++——移动语义与 LLVM 风格的类型转换
人工智能·笔记·学习
li星野6 小时前
5 TYPES OF ADVERBS — One-Page Notes
学习
星恒随风6 小时前
Linux库的底层原理:ELF文件格式、静态链接、程序加载、虚拟地址空间与GOT/PLT详解
linux·运维·笔记·学习·状态模式
罗西的思考6 小时前
[Agent Memory / 强化学习] MemPO源码学习笔记 — (7)— 混合机制
笔记·学习
starsky762387 小时前
Agent学习——上下文工程(三)
学习
ClinicTech7 小时前
婴儿培养箱技术笔记:温控、报警与数据记录的三层架构
笔记