84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
Vue.component(name, function (resolve) { require([path], resolve)})
name path都是传入的值 然后动态注册模块 但require是被强制静态化的导致path传了无效
问高人说用异步组件,去加载。无奈技术有限 无入手方向或头绪请给位指点 一二 或是贴码 更好 多谢各位
首先列出参考:
Vue异步组件
Webpack Dynamic Require
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) })
首先列出参考:
Vue异步组件
Webpack Dynamic Require
Webpack Code Spliting
然后用vue-cli的webpack-simple template写了个简单的demo:
仅仅是将App.vue丢到了src/component下面(目的是为了体现webpack的context解析),然后修改import的方式为dynamic require。
其实要动态require大概的意思就是要告诉webpack上下文,不然webpack在编译时并不知道这个module是什么(因为是个变量)。