problem description
vue.js component lazy loading failed after webpack packaging.
the environmental background of the problems and what methods you have tried
configure webpack by viewing online materials, but still cannot load components
related codes
/ / Please paste the code text below (do not replace the code with pictures)
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);
}})
}
this is the asynchronous load component function in the routing 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")
}},
this is the configuration in webpack.base.config.js