在vue和uniapp中关于资源和文件引入的总结

vue：

@：需要在构建工具中配置@，默认指向项目src

css：使用css只能用绝对和相对路径导入，使用less或者scss可用@

静态资源：推荐使用@

uniapp：

@：内置@，默认指向项目根目录，打包后随根目录地址变化而变化

css：默认内置scss，可使用@进行导入，也可使用绝对和相对路径导入

静态资源：推荐使用/static绝对路径

模版引入静态资源：

• @开头的绝对路径以及相对路径会经过 base64 转换规则校验
• 引入的静态资源在非 web 平台，均不转为 base64。
• web 平台，小于 4kb 的资源会被转换成 base64，其余不转。
• 自HBuilderX 2.6.6起template内支持@开头路径引入静态资源，旧版本不支持此方式
• App 平台自HBuilderX 2.6.9起template节点中引用静态资源文件时（如：图片），调整查找策略为【基于当前文件的路径搜索】，与其他平台保持一致
• 支付宝小程序组件内 image 标签不可使用相对路径

共同点：

• js不支持使用绝对路径
• 如果项目部署请求有自定义文件请求路径，如服务器有设置前缀，推荐使用@，可从打包之后的根路径往下找（uniapp适用，vue可能不行）
• 在img/image标签中可使用@也可使用绝对和相对路径导入

补充：

• 绝对路径：/开头，为项目根目录

• 相对路径：../代表上一级，./代表当前。从当前文件路径开始