chrome dev tools中的“源”选项卡没有显示正确的文件。

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代码中设置调试器，尝试单击Console选项卡中仍然重定向到上述代码的屏幕链接，并尝试在dev tools中搜索文件，并仍然将我定向到上面的代码。

Answer 1

你需要激活源地图。

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

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