记录Vite项目多页面应用模式踩坑

// 假设有一个Vite项目的入口文件 main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
 
// 创建Vite多页面应用的实例
const instance = createApp(App);
instance.use(router);
 
// 定义一个函数来动态加载页面组件
function loadPage(path) {
  return () => import(`./pages/${path}.vue`);
}
 
// 定义路由规则，并使用 loadPage 函数动态加载页面组件
const routes = [
  { path: '/', component: loadPage('home') },
  { path: '/about', component: loadPage('about') }
  // 更多的路由规则...
];
 
// 为路由配置加载的页面组件
router.addRoutes(routes);
 
// 挂载应用实例到 DOM 元素上
instance.mount('#app', true);

这个代码示例展示了如何在Vite项目中设置多页面应用的基本步骤。首先，创建Vue应用实例，并配置Vue Router。然后定义一个函数loadPage来动态加载页面组件。接着，定义路由规则并使用loadPage函数来指定组件的加载逻辑。最后，将应用实例挂载到页面上的某个元素中。这个过程有效地提高了项目的灵活性和可维护性。