Vue3 使用vite打包时的动态路由_vite 如何通过路由控制打包组件-CSDN博客

本文链接：https://blog.csdn.net/lixu102593/article/details/138196981

本文详细描述了一个Vue项目中main.js文件的配置，涉及组件挂载、路由守卫、pinia状态管理、全局组件、动态路由加载以及权限控制的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

main.js 的代码

import { createApp } from “vue”;
import App from “./App.vue”;

import router from “./router”;
import “./router/guardsman”;// 路由守卫

import pinia from “./pinia”;// pinia注册

import * as elementPulsUtils from “./utils/elementPuls”;
import * as utils from “./utils/utils”;
import json from “./assets/json/common.json”;// 公用json
import * as api from “./api/common”;// 公用api
import * as routerUtils from “./router/commonUtils”;

import “remixicon/fonts/remixicon.css”; // 引入remix图标样式文件
import “normalize.css”; // 引入标准化样式，做浏览器样式统一初始化
import “./assets/style/common.css”; // 引入公共样式

import “virtual:svg-icons-register”; // 引入svg-icon，virtual是虚拟模块引入方式
// 自定义svg图标展示组件
import svgIcon from “./components/SvgIcon/Index.vue”;

const app = createApp(App);

app.provide(“utils”, {
commonUtils: utils,
commonJson: json,
elementUtils: elementPulsUtils,
commonApi: api,
skipUtils: routerUtils,
});

// 全局组件挂载
app.component(“svgIcon”, svgIcon);
app.component(“CustomButton”, CustomButton);
app.component(“Pagination”, Pagination);
const useUserStore = JSON.parse(sessionStorage.getItem(“useUserStore”));
// 刷新页面时动态路由需要在这重新给值
// 刷新页面时动态路由会消失，根本原因是缓存里的路由信息的component字段少东西需要重新赋值才行
// 刷新页面运行路由代码时要放在 app.use(router); 项目注册路由之前不然还是会出现白屏
// 获取views下的所有的vue文件
const modules = import.meta.glob(“./views//.vue”);//使用vite打包使用这种方法获取之前插入的路由
//useUserStore?.luyouList 登录的时候保存的路由地址
if (useUserStore?.luyouList?.length > 0) {
for (let i = 0; i < useUserStore.luyouList.length; i += 1) {
if (!router.hasRoute(useUserStore.luyouList[i].name)) {
if (!useUserStore.luyouList[i].children) {
useUserStore.luyouList[i].component = modules[./views${useUserStore.luyouList[i].path}/index.vue];
router.addRoute(“layout”, useUserStore.luyouList[i]);
}
}
}
}
app.use(router);
app.use(pinia);
app.mount(“#app”);

在登录里获取到后台传过来的路由整理好插入到路由对象里
const routeList = […router.getRoutes(), …loginControls.luyougg];

// 无权限的菜单路径要进行删除
for (let i = 0; i < loginControls.luyougg.length; i += 1) {
    if (!router.hasRoute(loginControls.luyougg[i].name)) {
        if (!loginControls.luyougg[i].children) {
            router.addRoute("layout", loginControls.luyougg[i]);
        }
    }
}