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 等)只有被引用时,才会被打包编译。

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

相关推荐
Mr_li19 小时前
给 Vue 开发者的 uni-app 快速指南
vue.js·uni-app
anyup1 天前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
Mintopia2 天前
Vue3 项目如何迁移到 uni-app x:从纯 Web 到多端应用的系统指南
uni-app
Mintopia2 天前
uni-app x 发展前景技术分析:跨端统一的新阶段?
uni-app
不爱说话郭德纲3 天前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app
HashTang4 天前
【AI 编程实战】第 12 篇:从 0 到 1 的回顾 - 项目总结与 AI 协作心得
前端·uni-app·ai编程
JunjunZ4 天前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
郑州光合科技余经理5 天前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
西岸行者5 天前
学习笔记:SKILLS 能帮助更好的vibe coding
笔记·学习
starlaky5 天前
Django入门笔记
笔记·django