vue.js webpack打包

问题描述

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中的配置

你期待的结果是什么?实际看到的错误信息又是什么?

阅读 937
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题