Vue 懒加载组件 路径不对

最近在使用VueRouter的懒加载组件的时候.

const routes = [

    {
        path: '/',
        component: App
    },
    {
        path: '/category',
        component: resolve => {require(['./components/Category.vue'], resolve)}
    }
]

但是在加载/category的时候,我发现会报错。

原来webpack会把这个懒加载单独加载一个js,默认按照
0.app.js 1.app.js ……的顺序加载的

通过简单的debug发现是0.app.js的路径不对

通过webpack的设置即可解决(我使用的laravel,配置根据情况自行修改)

Elixir.webpack.mergeConfig({
    module: {
        loaders: [
            {
                test: /\.css/,
                loader: "style!css"
            }

        ]
    },
    output: {
        publicPath: "js/"
    }
})

配置下output下的publicPath即可。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,Vue封装图片懒加载组件的实现原理如下: 1. 首先,通过全局注册组件,将懒加载组件注册到Vue中。这个懒加载组件是一个在页面加载时不立即显示的占位组件,用于提升网页性能和用户体验。 2. 然后,使用自定义指令来实现懒加载功能。这个指令可以应用在需要懒加载的图片元素上,例如`<img v-lazy="item.src" alt="" />`。 3. 在指令的逻辑中,使用`useIntersectionObserver`函数来监听图片元素是否在可视区域内。当图片元素进入可视区域时,触发回调函数。 4. 在回调函数中,停止监听,给图片元素设置`src`属性,值为要加载的图片的路径。如果加载失败,显示默认的图片。 5. 最后,在Vue的安装方法中,将懒加载组件和指令注册到Vue中,使其可以在整个Vue应用中使用。 综上所述,以上是Vue封装图片懒加载组件的实现原理。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue中实现图片懒加载的方法(一)](https://blog.csdn.net/weixin_54145360/article/details/127789692)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [【Vue3】 vue3图片懒加载-封装自定义指令](https://blog.csdn.net/weixin_46862327/article/details/129035539)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值