出现 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('/'), // 这里根据实际情况修改为你的基础 URL
  routes
});

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