javascript - 动态传值给require加载vue组件?

 mobiledu2502877527 发布于 2022-11-27 01:10

Vue.component(name, function (resolve) {
require([path], resolve)
})

name path都是传入的值 然后动态注册模块
但require是被强制静态化的导致path传了无效

问高人说用异步组件,去加载。
无奈技术有限 无入手方向或头绪
请给位指点 一二 或是贴码 更好
多谢各位

1 个回答
  • 首先列出参考:

    1. Vue异步组件

    2. Webpack Dynamic Require

    3. Webpack Code Spliting

    然后用vue-cli的webpack-simple template写了个简单的demo:
    仅仅是将App.vue丢到了src/component下面(目的是为了体现webpack的context解析),然后修改import的方式为dynamic require。
    其实要动态require大概的意思就是要告诉webpack上下文,不然webpack在编译时并不知道这个module是什么(因为是个变量)。

    main.js

    import Vue from 'vue'
    // import App from './App.vue'
    
    const name = 'App.vue'
    
    const App = (resolve) => {
        require.ensure([], (require) => {
            resolve(require.context('./component', false, /\.vue$/)(`./${name}`));
        }, 'app');
    };
    
    new Vue({
      el: '#app',
      render: h => h(App)
    })
    
    2022-11-27 01:54 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有