启动项目并使用浏览器访问的时候，总是出现 crypto.randomUUID is not a function的报错项，这是什么原因？

Question

这个是全部的项目依赖，当我启动该项目并使用浏览器访问的时候，总是出现 crypto.randomUUID is not a function的报错项，这是什么原因？

// package.json
"dependencies": {
        "@element-plus/icons-vue": "^2.1.0",
        "@wangeditor/editor": "^5.1.23",
        "@wangeditor/editor-for-vue": "^5.1.12",
        "axios": "^1.3.5",
        "default-passive-events": "^2.0.0",
        "echarts": "^5.4.2",
        "element-plus": "^2.3.3",
        "html2canvas": "^1.4.1",
        "js-cookie": "^3.0.1",
        "jsbarcode": "^3.11.6",
        "jspdf": "^3.0.0",
        "mitt": "^3.0.0",
        "nprogress": "^0.2.0",
        "pinia": "^2.0.34",
        "print-js": "^1.6.0",
        "qrcodejs2-fixes": "^0.0.2",
        "qs": "^6.11.1",
        "screenfull": "^6.0.2",
        "sortablejs": "^1.15.0",
        "vue": "^3.2.47",
        "vue-clipboard3": "^2.0.0",
        "vue-demi": "^0.13.11",
        "vue-esign": "^1.1.4",
        "vue-router": "^4.1.6",
        "xlsx": "^0.18.5"
    },
    "devDependencies": {
        "@types/node": "^18.15.11",
        "@types/nprogress": "^0.2.0",
        "@types/vue-router": "^2.0.0",
        "@types/xlsx": "^0.0.36",
        "@typescript-eslint/eslint-plugin": "^5.58.0",
        "@typescript-eslint/parser": "^5.58.0",
        "@vitejs/plugin-vue": "^4.1.0",
        "@vue/compiler-sfc": "^3.2.47",
        "eslint": "^8.38.0",
        "eslint-plugin-vue": "^9.10.0",
        "fast-glob": "^3.2.11",
        "prettier": "^2.8.7",
        "sass": "^1.61.0",
        "typescript": "^5.0.4",
        "vite": "^4.2.1",
        "vite-plugin-cdn-import": "^0.3.5",
        "vite-plugin-compression": "^0.5.1",
        "vite-plugin-svg-icons": "^2.0.1",
        "vite-plugin-vue-setup-extend-plus": "^0.1.0",
        "vue-eslint-parser": "^9.1.1"
    }

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

crypto.randomUUID 是 Node.js 14 及更高版本中的一个方法，可以生成随机 UUID。然而，如果你的项目使用的是低版本的 Node.js，或者你使用的是浏览器环境，而不是 Node.js 环境，那么这个方法将无法使用。

在 Vue.js 项目中，如果你使用的是低版本的 Node.js，或者你使用的是浏览器环境，你可以使用 uuid 库来生成随机 UUID。下面是一个简单的示例：

import { v4 as uuidv4 } from 'uuid';

const uuid = uuidv4();
console.log(uuid);

如果你想在浏览器环境中使用 uuid 库，可以使用 CDN 加载库：

<script src="https://cdn.jsdelivr.net/npm/uuid@8.3.2/dist/uuid.min.js"></script>

然后，在你的 Vue.js 代码中，可以使用 uuid 方法来生成随机 UUID。

如果你想使用 Node.js 14 及更高版本中的 crypto.randomUUID 方法，可以升级你的 Node.js 版本。

如果你已经升级了 Node.js 版本，但是仍然出现错误，可以尝试清除缓存和重新启动项目。