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是什么(因为是个变量)。