vue单页面项目打包之后生成很多个js文件

问题：一个vue单页面项目，但是打包之后生成了很多个js文件，和css文件

 原因是因为这种写法是路由懒加载（官方解释）

component: () => {
      return import('../views/login/index.vue');
  }

() => import表明是你要异步加载一个组件，所以他会把这个组件单独进行打包，需要时再进行加载。这样能确保你最主要的包比较小，其他不太重要或者需要时才加载的，则另行打包。

import Vue from 'vue';
import VueRouter from 'vue-router';
 
Vue.use(VueRouter);
 
const routes = [
  {
    path: '/',
    name: 'login',
    component: () => {
      return import('../views/login/index.vue');
    },
  },
  {
    path: '/fillAddress',
    name: 'fillAddress',
    component: () => {
      return import('../views/fillAddress/index.vue');
    },
  },
  {
    path: '/add-feedback-content',
    name: 'addFeedbackContent',
    component: function () {
      return import('../views/add-feedback-content/index.vue');
    },
  },
];
 
const router = new VueRouter({
  routes,
});
 
export default router;

如果不想打那么多的包可改变路由组件的引入方式：修改如下：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Cookies from 'js-cookie';
import Login from '../views/login/index.vue';
import CcList from '../views/ccList/index.vue';
import CcDetail from '../views/ccDetail/index.vue';
Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'login',
    component: Login,
    meta: {
      title: '服务记录',
    },
  },
  {
    path: '/fillAddress',
    name: 'fillAddress',
    component: FillAddress,
    meta: {
      title: '填写领取礼品地址',
    },
  },
  
  {
    path: '/ccDetail',
    name: 'ccDetail',
    component: CcDetail,
    meta: {
      title: '问题反馈详情',
    },
  },
];

const router = new VueRouter({
  routes,
});

router.beforeEach((to, from, next) => {
  if (to.meta?.title) {
    document.title = to.meta.title;
  }
  const token = Cookies.get('token') || '';
  if (to.name !== 'login' && token === '') next({ name: 'login' });
  else next();
});

export default router;

通过import Login from '../views/login/index.vue';的方式引入路由组件