“npm run dev”在我的公共文件夹中创建 0.js, 1.js, ... 14.js 文件

Question

我是使用 Webpack、NPM 和 VueJS 的初学者。

我不知道我做了什么，我在互联网上找不到任何解决方案。

当我在 VueJS 中运行命令

npm run dev

时，webpack 会创建 15 个文件，编号从 0.js 到 14.js

文件第一行是：

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{

文件名中的0

有人知道我的应用程序出了什么问题吗？

编辑：

我发现每个文件都与一个组件相关。 我想这与我的路由器文件有关：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

function loadView(view) {
    return () => import(`../components/${view}.vue`);
}

function loadLayout(view) {
    return () => import(`../components/_layouts/${view}.vue`);
}

const routes = [
    // USER ROUTES
    {
        path: '/dashboard',
        component: loadView('user/Dashboard'),
        meta: {
            layout: loadLayout('user/Layout'),
            auth: "user"
        },
        name: 'user'
    },
    // SUPPLIER ROUTES
    {
        path: '/supplier',
        component: loadView('supplier/Dashboard'),
        meta: {
            layout: loadLayout('supplier/Layout'),
            auth: "supplier"
        },
        name: 'supplier'
    },
    // ADMIN ROUTES
    {
        path: '/admin',
        component: loadView('admin/Dashboard'),
        meta: {
            layout: loadLayout('admin/Layout'),
            auth: "admin"
        },
        name: 'admin'
    },
    // DEFAULT ROUTES
    {
        path: '/register',
        component: loadView('auth/Register'),
        meta: {
            layout: loadLayout('home/Layout'),
            auth: false
        },
        name: 'register'
    },
    {
        path: '/login',
        name: 'login',
        component: loadView('auth/Login'),
        meta: {
            layout: loadLayout('home/Layout'),
            auth: false
        }
    },
    {
        path: '/',
        component: loadView('home/Home'),
        meta: {
            layout: loadLayout('home/Layout'),
            auth: undefined
        },
        name: 'home'
    },
    // otherwise redirect to home
    {
        path: '*',
        redirect: '/'
    }

];

Vue.router = new Router({
    hashbang: false,
    mode: 'history',
    routes
});

export default Vue.router;

Answer 1

要移动这些动态导入，您必须将此代码放入

webpack.mix.js

:

mix.webpackConfig({     
    output: {         
        chunkFilename: 'js/[name].js',     
    }, 
});

Answer 2

在大型应用程序中，我们可能需要将应用程序分成更小的块，并且仅在需要时从服务器加载组件。为了实现这一点，Vue 有一个 DefineAsyncComponent 函数：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...load component from server
    resolve(/* loaded component */)
  })
})
// ... use `AsyncComp` like a normal component

如您所见，defineAsyncComponent 接受返回 Promise 的加载器函数。

与普通组件一样，异步组件可以使用 app.component() 进行全局注册：

app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

本地注册组件时也可以使用defineAsyncComponent：

<script>
import { defineAsyncComponent } from 'vue'

export default {
  components: {
    AdminPage: defineAsyncComponent(() =>
      import('./components/AdminPageComponent.vue')
    )
  }
}
</script>

每当你访问使用异步组件的组件时，你可以在开发工具上查看网络选项卡，你可以看到很多js文件，以

number

.js

开头