延迟加载组件不适用于 Vue Router [英] Lazy Loading Components not working with Vue Router

问题描述

当我尝试在我的 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.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 的截图

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屋！