aliang888
aliang888
  • 发布:2025-08-22 11:46
  • 更新:2025-08-22 13:52
  • 阅读:32

设置了h5端基础运行路径/h5/后,js定义的以/开头的绝对路径打包后异常

分类:uni-app
            <view class="list">  
                <view class="item" v-for="item in items" :key="item.title" @click="itemClick(item)">  
                    <view class="title">{{ item.title }}</view>  
                    <view class="icon" :style="{ 'background-image': `url(${baseUrl  +  item.icon})` }"></view>  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            baseUrl: '/',  
            items: [  
                { title: 'My order', icon: 'static/my/Order.png', url: '/pages/my/order/order' },  
                { title: 'Reseller', icon: 'static/my/Reseller.png', url: '/pages/my/reseller' },  
                { title: 'Community', icon: 'static/my/Community.png', url: '/pages/my/community' },  
                { title: 'Member missions', icon: 'static/my/Missions.png', url: '/pages/my/missions' },  
            ],  
        }  
    },  

    onLoad() {  
//我这样子单独对h5端这样子处理,不知道会不会有潜在的危险  
        // #ifdef H5  
        this.baseUrl = window.__uniConfig.router.base  
        // #endif  
    },

原来路径是这样子的,没有设置h5端的基础运行路径的情况下,图片是能正常使用
icon: '/static/my/Order.png' 编译后https://xxxxxxx/static/my/Order.png

....  
    "h5": {  
        "router": {  
            "mode": "hash",  
            "base": "/h5/"  
        },  
....

设置了base为 "/h5/"后
https://xxxxxxx/static/my/Order.png 这样子路径不对,正确的是https://xxxxxxx/h5/static/my/Order.png

2025-08-22 11:46 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

项目是部署在 主域名的/h5子目录下的吗?

DCloud_UNI_JBB

DCloud_UNI_JBB

this.baseUrl 能访问到你设置的 base 吗?

6***@qq.com

6***@qq.com

直接导入,打包的时候会自动编译路径

// vue2  
icon:require('xxx.png')
// vue3  
import icon_xx from 'xxx.png'  
icon:icon_xx

要回复问题请先登录注册