百度小程序页面引用资源策略调整

布满荆棘的人生 2021-09-29 13:08 278阅读 0赞

百度编译工具版本2.13.0以上路径解析策略修改, 2.13.8版本在swan、css文件中引用资源不存在时会抛出错误；

相对路径的解析是基于当前文件的路径去查找所引用的资源路径；

绝对路径都是基于项目目录去查找所引用的资源路径；

### css文件 ###

@import

支持相对路径；

支持绝对路径

### url() ###

只支持相对路径；  
swan文件

###    src属性 ###

支持相对路径；  
支持绝对路径；  
Example项目结构

>  ├── app.css
> 
>  ├── app.js
> 
>  ├── app.json
> 
> ├── common.css
> 
> ├── custom-component
> 
> │   └── custom-a
> 
> │       ├── custom-a.css
> 
> │       ├── custom-a.js
> 
> │       ├── custom-a.json
> 
> │       └── custom-a.swan
> 
> ├── images
> 
> │   ├── 1.png
> 
> │   └── 2.png
> 
> └── pages
> 
>   └── one
> 
>      ├── one.css
> 
>      ├── one.json
> 
>      └── one.swan

自定义组件css文件中使用@import：

// custom-a.css
    
        // recommend
    
       @import '/common.css';
    
         // or
    
        @import './../../app.css';

自定义组件css文件中使用url引用资源：

// custom-a.css
    
      // recommend
    
        .test {
    
          background-image: url('./../../images/1.png')
    
         }

自定义组件swan文件中使用引用资源：

// custom-a.swan
    
       // recommend
    
       <image src="/images/1.png" />
    
        // or
    
       <image src="./../../images/1.png" />