调试vue build之后的js文件

调试 dist 目录下的 JavaScript 文件可以按照以下步骤进行：

1. 确保 Source Maps 正常生成

确认你的构建配置中已启用 Source Maps，确保 .map 文件与构建后的 .js 文件位于同一目录。

2. 启动一个本地服务器

使用本地服务器来服务 dist 目录，这样浏览器可以正确处理文件路径。例如，可以使用 http-server：

 

npm install -g http-server
http-server dist

3. 打开 Chrome DevTools

• 在浏览器中打开你的应用程序（例如 http://localhost:8080）。
• 使用 F12 打开 Chrome DevTools。

4. 导航到 Sources 面板

• 在 DevTools 中，转到“Sources”标签页。
• 你应该能看到项目的文件结构，包括原始的 .vue 文件和生成的 JavaScript 文件。

5. 设置断点

• 找到生成的 JavaScript 文件或相应的 .map 文件，点击行号设置断点。
• 刷新页面，调试器将在断点处暂停，你可以检查变量、调用堆栈等。

6. 调试

• 使用调试工具的功能（如步进、监视变量等）进行调试。

确保你的浏览器没有缓存老版本的文件，必要时可以清除缓存。通过这些步骤，你应该能顺利调试 dist 目录下的 JS 文件！