如何本地搭建运行Vue/JS GitHub项目并调试cvss-v4-calculator

核心认知纠正 #

这个项目是纯CDN引入Vue的静态前端项目，没有使用Vue CLI/Vite等工程化构建工具，因此不需要npm install或npm run这类命令——你之前用Node.js的方式完全走错了方向，项目本身也不需要package.json、node_modules这类文件。

解决步骤 #

1. 修复「Vue is not defined」错误

报错的原因大概率是脚本加载顺序错误：必须先加载Vue CDN，再加载app.js。检查你的index.html，确保脚本顺序是这样的：

<!-- 先加载Vue CDN -->
<script src="https://unpkg.com/vue@3.2.45/dist/vue.global.prod.js"></script>
<!-- 再加载项目逻辑脚本 -->
<script src="app.js"></script>

如果网络访问CDN不稳定，可以替换为国内镜像：

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.45/dist/vue.global.prod.js"></script>

2. 用Live Server启动项目（避免本地文件协议限制）

直接双击打开HTML文件会使用file://协议，可能导致部分功能异常，推荐用VS Code的Live Server插件启动：

• 在VS Code扩展商店搜索安装「Live Server」
• 右键点击index.html，选择「Open with Live Server」，项目会在本地服务器（比如http://127.0.0.1:5500）启动

3. 配置VS Code逐行调试

在VS Code中配置浏览器调试，就能直接打断点逐行调试app.js：

1. 打开「运行和调试」面板（快捷键Ctrl+Shift+D）
2. 点击「创建launch.json文件」，选择「Chrome」（或你常用的浏览器）
3. 将生成的launch.json修改为以下内容：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "启动Chrome调试",
      "url": "http://127.0.0.1:5500",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

4. 确保Live Server正在运行，点击调试按钮启动Chrome，此时就能在app.js中点击行号添加断点，进行逐行调试

内容的提问来源于stack exchange，提问作者James-Jesse Drinkard