chrome 开发工具中的“源”选项卡未显示正确的文件

Question

我正在尝试在代码中调试和设置断点，但每当我导航到“源”选项卡时，它都会显示不是实际代码的文件，格式始终如下：

import { render, staticRenderFns } from "./Index.vue?vue&type=template&id=e99f4d94&scoped=true&"
import script from "./Index.vue?vue&type=script&lang=js&"
export * from "./Index.vue?vue&type=script&lang=js&"


/* normalize component */
import normalizer from "!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js"
var component = normalizer(
  script,
  render,
  staticRenderFns,
  false,
  null,
  "e99f4d94",
  null
  
)

/* vuetify-loader */
import installComponents from "!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js"
import { VCol } from 'vuetify/lib/components/VGrid';
import { VRow } from 'vuetify/lib/components/VGrid';
installComponents(component, {VCol,VRow})


/* hot reload */
if (module.hot) {
  var api = require("D:\\vue-hot-reload-api\\dist\\index.js")
  api.install(require('vue'))
  if (api.compatible) {
    module.hot.accept()
    if (!api.isRecorded('e99f4d94')) {
      api.createRecord('e99f4d94', component.options)
    } else {
      api.reload('e99f4d94', component.options)
    }
    module.hot.accept("./Index.vue?vue&type=template&id=e99f4d94&scoped=true&", function () {
      api.rerender('e99f4d94', {
        render: render,
        staticRenderFns: staticRenderFns
      })
    })
  }
}
component.options.__file = "src/views/adas/Index.vue"
export default component.exports

无论我做什么，我都找不到我正在尝试调试的实际 Vue 文件

我尝试在我的 Vue 代码中设置调试器，尝试单击“控制台”选项卡中屏幕的链接，该链接仍然重定向到上述代码，并尝试在开发工具中搜索该文件，但仍然将我定向到上述代码。

Answer 1

您需要激活sourcemap。

如果你使用的是vue-cli，你可以这样做。

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map',
  }
})

Answer 2

我在所有组件/视图的

Console.log("myview.vue mounted");

方法中添加

mounted

，这样我可以通过单击文本右侧的链接从开发工具控制台导航到每个代码。