延迟加载组件不适用于 Vue Router

本文介绍了延迟加载组件不适用于 Vue Router的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

当我尝试在我的 routes.js 文件中延迟加载组件时，我的 CSS 没有被编译.

When trying to lazy load components in my routes.js file, my CSS is not compiled.

在文件顶部使用 import 语句时，一切都按预期工作.没有控制台错误或编译错误.我正在使用 Vue.js、Vue-Router、Laravel 和 Laravel-Mix(所有最新版本)

When using an import statement at the top of the file, everything works as expected. There are no console errors or compile errors. I'm using Vue.js, Vue-Router, Laravel, and Laravel-Mix (all latest versions)

//Working (CSS is present)
import Home from '../../components/admin/Home';

//Not Working (No CSS is present)
function loadView(view) {
    return () => import(/* webpackChunkName: "view-[request]" */ `../../components/admin/${view}.vue`)
}

//How I'm initializing the component
let routes = [
    { 
        path: '/', 
        name: 'home',
        component: loadView('Home'),
        meta: { 
            requiresAuth: true
        }
    }]

//Laravel Mix Config
const mix = require('laravel-mix');
const webpack = require('webpack');

mix.js('resources/js/apps/registration/app.js', 'public/js/apps/registration/app.js')
   .js('resources/js/apps/admin/app.js', 'public/js/apps/admin/app.js')
   .js('resources/js/material-dashboard.js', 'public/js/material-dashboard.js')
   .js('resources/js/material-dashboard-extras.js', 'public/js/material-dashboard-extras.js')
   .sass('resources/sass/app.scss', 'public/css');

 mix.webpackConfig({
   plugins: [
      /**
       * Bug with moment.js library causing ./locale not to be found
       * https://github/moment/moment/issues/2979
       * Created an empty module running npm install --save empty-module and then doing the below
       */
      new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/),
      /**
       * Global objects are not getting recognized via require
       * Set them up here
       * global_name: path or module
       */
      new webpack.ProvidePlugin({
         /**
          * There was an error with Popper not being defined due to Popper being included in Bootstrap
          * https://github/FezVrasta/bootstrap-material-design/issues/1296
          */
         'Popper': 'popper.js/dist/umd/popper'
     })
  ]
 });

附上我所说的未应用 CSS 的截图

Attached are screenshots of what I mean by CSS not being applied

导入后页面的外观

尝试在 routes.js 中延迟加载组件时页面的外观>

推荐答案

您不应该导入 webpack 块名称，而应该像这样引用组件的适当路径:

You are not supposed to import the webpack chunk name, instead just reference the approriate path to the component like so:

//Not Working (No CSS is present)
function loadView(view) {
    return () => import(  `../../components/admin/${view}.vue`)
}

注意:未测试，希望有帮助:)

NB: not tested, hope it helps :)

这篇关于延迟加载组件不适用于 Vue Router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！