出现 Uncaught ReferenceError: process is not defined 错误

在浏览器环境中，process 对象是 Node.js 环境特有的，因此当你在浏览器中运行代码时，会出现 Uncaught ReferenceError: process is not defined 错误。这个错误是因为代码里使用了 process.env.BASE_URL，而浏览器环境下并没有 process 对象。

解决方案

1. 使用 Vite 构建工具

如果你使用的是 Vite 构建工具，process.env 是不被支持的，Vite 使用 import.meta.env 来替代。你需要把代码中的 process.env.BASE_URL 替换成 import.meta.env.BASE_URL。

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';
import EquipmentList from '../views/EquipmentList.vue';
import EquipmentDetail from '../views/EquipmentDetail.vue';
import EquipmentMap from '../views/EquipmentMap.vue';
import Inspection from '../views/Inspection.vue';
import WorkOrderList from '../views/WorkOrderList.vue';
import WorkOrderDetail from '../views/WorkOrderDetail.vue';
import WorkOrderCreate from '../views/WorkOrderCreate.vue';
import UserList from '../views/UserList.vue';
import UserDetail from '../views/UserDetail.vue';
import Dashboard from '../views/Dashboard.vue';const routes = [{path: '/',name: 'Home',component: Home,meta: { requiresAuth: true }},{path: '/login',name: 'Login',component: Login,meta: { requiresGuest: true }},{path: '/dashboard',name: 'Dashboard',component: Dashboard,meta: { requiresAuth: true }},{path: '/equipments',name: 'EquipmentList',component: EquipmentList,meta: { requiresAuth: true }},{path: '/equipments/map',name: 'EquipmentMap',component: EquipmentMap,meta: { requiresAuth: true }},{path: '/equipments/:id',name: 'EquipmentDetail',component: EquipmentDetail,meta: { requiresAuth: true }},{path: '/equipments/:id/inspection',name: 'Inspection',component: Inspection,meta: { requiresAuth: true }},{path: '/equipments/:id/inspection/:recordId',name: 'InspectionRecord',component: Inspection,meta: { requiresAuth: true }},{path: '/workorders',name: 'WorkOrderList',component: WorkOrderList,meta: { requiresAuth: true }},{path: '/workorders/create',name: 'WorkOrderCreate',component: WorkOrderCreate,meta: { requiresAuth: true }},{path: '/workorders/:id',name: 'WorkOrderDetail',component: WorkOrderDetail,meta: { requiresAuth: true }},{path: '/users',name: 'UserList',component: UserList,meta: { requiresAuth: true, requiresAdmin: true }},{path: '/users/:id',name: 'UserDetail',component: UserDetail,meta: { requiresAuth: true, requiresAdmin: true }}
];const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes
});// 路由守卫
router.beforeEach((to, from, next) => {const isAuthenticated = localStorage.getItem('token');// 检查是否需要认证if (to.meta.requiresAuth && !isAuthenticated) {next({ name: 'Login' });}// 检查是否需要游客身份else if (to.meta.requiresGuest && isAuthenticated) {next({ name: 'Home' });}// 检查是否需要管理员权限else if (to.meta.requiresAdmin) {const userRole = localStorage.getItem('role');if (userRole !== 'admin') {next({ name: 'Home' });} else {next();}}else {next();}
});export default router;

2. 使用 Webpack 构建工具

如果你使用的是 Webpack 构建工具，可以通过 webpack.DefinePlugin 来定义 process.env。

首先，在 webpack.config.js 中添加如下配置：

const webpack = require('webpack');module.exports = {// 其他配置...plugins: [new webpack.DefinePlugin({'process.env': {BASE_URL: JSON.stringify(process.env.BASE_URL)}})]
};

这样就可以在代码中继续使用 process.env.BASE_URL 了。

3. 硬编码 BASE_URL

如果你不想使用构建工具的环境变量，可以直接硬编码 BASE_URL：

const router = createRouter({history: createWebHistory('/'), // 这里根据实际情况修改为你的基础 URLroutes
});

以上三种方法都可以解决 process is not defined 的问题，你可以根据自己的项目情况选择合适的方法。