出现 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

javascript 复制代码
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 中添加如下配置:

javascript 复制代码
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

javascript 复制代码
const router = createRouter({
  history: createWebHistory('/'), // 这里根据实际情况修改为你的基础 URL
  routes
});

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

相关推荐
杨进军11 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW26 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字32 分钟前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im1 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript