如何将 Vite Vue Router 4 捆绑到同一个块中

Posted 2023-02-22

【中文标题】如何将 Vite Vue Router 4 捆绑到同一个块中

【英文标题】：How to bundle Vite Vue Router 4 into same chunk

【发布时间】：2021-09-11 07:15:05

【问题描述】：

使用 vue cli，您可以使用 web-pack 将 vue 路由块捆绑在一起

const routes: Array<RouteRecordRaw> = [
   path: '/', name: 'Home', component: Home ,
  
    path: '/login',
    name: 'Login',
    meta:  alreadyAuth: true ,
    component: () => import(/* webpackChunkName: "login" */ '../views/public/Login.vue')
  ,
   path: '/splash', name: 'Splah', component: Splash ,
  
    path: '/portal',
    name: 'Portal',
    meta:  requireAuth: true ,
    component: () => import(/* webpackChunkName: "portal" */ '../layouts/Dashboard.vue'),
    children: [
       path: '', component: () => import(/* webpackChunkName: "portal" */ '../views/portal/Portal.vue') 
    ]
  
]

我目前正在为一个项目使用 Vite。有没有办法将块（例如 Dashboard 和 Portal）捆绑在一起？

运行 nom run build 将为 Portal.js 和 Dashboard.js 生成单独的块文件

谢谢

【参考方案1】：

为了能够动态加载视图，您必须按以下方式应用导入 () => import ('Module')，如果我们想要将其按组划分，则必须在 vite.config 中指定它。 [js,ts]我给你举个小例子

// routes.ts
const UserDetails = () => import('./UserDetails.vue')
const UserProfileEdit = () => import('./UserProfileEdit.vue')

const Dashboard = () => import('./Dashboard.vue')

const routes: Array<RouteRecordRaw> = [
  
    path: '/user-details',
    component: UserDetails
  ,
  
    path: '/user-profile-edit',
    component: UserProfileEdit
  ,
  
    path: '/dashboard',
    component: Dashboard,
  ,
]

// vite.config.ts
import  defineConfig  from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

export default defineConfig(
  build: 
    rollupOptions: 
      // https://rollupjs.org/guide/en/#outputmanualchunks
      output: 
        manualChunks: 
          'user': [
            './src/UserDetails',
            './src/UserProfileEdit',
          ],
          'dashboard': [
            './src/Dashboard',
          ],
        ,
    ,
  ,
  plugins: [vue()]
);

如果您需要更多信息，可以查看 vue-router 文档：https://next.router.vuejs.org/guide/advanced/lazy-loading.html#grouping-components-in-the-same-chunk