Subscribe on changes!

defineAsyncComponent如何加载打包后的vue组件

avatar
Jul 19th 2022

What problem does this feature solve?

比如,我有一个远程组件page1.vue,通过vite进行打包后,生成page1.js,defineAsyncComponent如何引用并注册到当前app内。

What does the proposed API look like?

希望可以像本地的vue组件一样可以被引用。

avatar
Jul 20th 2022
defineAsyncComponent(() => import('/path/to/page1.js').then(m => m.default))
avatar
Jul 20th 2022
defineAsyncComponent(() => import('/path/to/page1.js').then(m => m.default))

如果page1.js是远程的呢,比如http:xxx.com/page1.js

avatar
Jul 20th 2022

@littleweb 同理 Same

defineAsyncComponent(() => import('http://example.com/path/to/page1.js').then(m => m.default))
avatar
Jul 20th 2022

@littleweb 同理 Same

defineAsyncComponent(() => import('http://example.com/path/to/page1.js').then(m => m.default))

尝试了一下,onMounted没有执行,打包的组件代码如下:

<script>
    export default {
        name: "xxx-lib"
    }
</script>
<template>
    <div>
        {{docid}}
    </div>
</template>
<script setup>
    import { ref, onMounted } from 'Vue';
    import axios from 'axios';

    const docid = ref('xxx');
    onMounted(async () => {
        const md5 = (await axios.get(`https://cs-api.sh-d.com/md5?str=xxx`)).data;
        docid.value = md5;
    });
</script>
avatar
Jul 20th 2022

那我认为本问题到 vue-core 仓库提问就不太适合了。请 附带最小复现仓库Stack Overflow (英文)、中文社区 (非官方)、官方论坛 或是 SegmentFault(中文)搜索和提问

Then I don't think it's appropriate to ask this question in the vue-core repository. Please provide minimal reproduction repository at Stack Overflow or SegmentFault (Chinese) to search and ask questions

avatar
Jul 20th 2022

那我认为本问题到 vue-core 仓库提问就不太适合了。请 附带最小复现仓库Stack Overflow (英文)、中文社区 (非官方)、官方论坛 或是 SegmentFault(中文)搜索和提问

Then I don't think it's appropriate to ask this question in the vue-core repository. Please provide minimal reproduction repository at Stack Overflow or SegmentFault (Chinese) to search and ask questions

eg. https://stackblitz.com/edit/vitejs-vite-41edbw?file=src%2FApp.vue

avatar
Jul 20th 2022

It's a question that concerns build systems / bundlers first and foremost, and can't be solved/answered in Vue core

avatar
Sep 1st 2022

不会报错吗 Failed to resolve module specifier "Vue". Relative references must start with either "/", "./", or "../".