问题描述
vue.js组件懒加载webpack打包后组件加载失败。
问题出现的环境背景及自己尝试过哪些方法
自己查看网上资料对webpack进行配置,但是还是无法加载组件
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
function lazyLoadView(AsyncView){
const AsyncHandle = ()=>({
component: AsyncView,
//异步组件加载时使用的组件
loading: require('@/components/RouterLoading.vue').default,
//加载失败是使用的组件
error: require('@/components/RouterError.vue').default,
delay: 300,
timeout: 10000
});
return Promise.resolve({
functional: true,
render(h,{data,children}){
return h(AsyncHandle,data,children);
}
})
}
这是在路由index.js中的异步加载组件函数。
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
// path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
chunkFilename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'vendor': path.resolve(__dirname,'../src/vendor')
}
},
这是在webpack.base.config.js中的配置