延迟加载组件不适用于 Vue 路由器答案

【问题标题】：Lazy Loading Components not working with Vue Router延迟加载组件不适用于 Vue 路由器
【发布时间】：2019-09-29 21:33:29
【问题描述】：

尝试在我的 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 的屏幕截图

How page looks with import

How page looks when trying to lazy load components in routes.js

【问题讨论】：

不确定是否可以动态导入可变组件文件名（编译时操作）。您是否尝试过使用静态文件名（文件路径中没有可变部分）？ () => import(/* webpackChunkName: "view-1" */ "../../components/admin/view1.vue")

标签： vue.js vuejs2 vue-router

【解决方案1】：

您不应该导入 webpack 块名称，而只是引用组件的适当路径，如下所示：

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

注意：未测试，希望对您有所帮助:)

【讨论】：