Vue 라우터에서 동작하지 않는 컴포넌트 레이지

Vue 라우터에서 동작하지 않는 컴포넌트 레이지

routes.js 파일에 컴포넌트를 느리게 로드하려고 하면 CSS가 컴파일되지 않습니다.

파일 맨 위에 있는 Import 문을 사용하면 모든 것이 예상대로 작동합니다.콘솔 오류 또는 컴파일 오류는 발생하지 않는다.Vue.js, Vue-Router, Laravel 및 Laravel-Mix(모두 최신 버전)를 사용하고 있습니다.

//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.com/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.com/FezVrasta/bootstrap-material-design/issues/1296
          */
         'Popper': 'popper.js/dist/umd/popper'
     })
  ]
 });

CSS 미적용 스크린샷 첨부

Import 시 페이지 표시 방법

루트의 컴포넌트를 느리게 로드하려고 할 때의 페이지 표시 방법.js

웹 팩 청크 이름을 가져오면 안 됩니다. 대신 다음과 같이 컴포넌트에 대한 해당 경로를 참조하기만 하면 됩니다.

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

NB: 테스트되지 않았습니다. 도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/56103608/lazy-loading-components-not-working-with-vue-router