如何配置 Laravel Mix Vue.js 源图以在调试模式下显示真实的组件代码

Question

我Laravel 5.4与 一起使用Vue.js 2.6。我在控制台中查看*.vue组件文件的 sourceMap 时遇到问题。我使用以下脚本配置 Laravel mix：

let mix = require('laravel-mix');

mix.webpackConfig({
    devtool: 'eval-source-map'
});

mix.js([
        'resources/assets/js/app.js'
    ], 'public/js')
    .sourceMaps()
    .version();

例如我有这样的 vue 组件：

<template>
    <div class="Example" @click="add()">
        {{ name }}
    </div>
</template>

<script>
    export default {
        data(){
            return {
                name: 'John'
            }
        },
        methods:{
            add(){
                console.log('example click')
            }
        }
    };
</script>

但是当 Laravel mix 编译它时，我在 chrome 的源选项卡中看到这样的内容：

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    {
      staticClass: "Example",
      on: {
        click: function($event) {
          return _vm.add()
        }
      }
    },
    [_vm._v("\n    " + _vm._s(_vm.name) + "\n")]
  )
}
var staticRenderFns = []
render._withStripped = true
module.exports = { render: render, staticRenderFns: staticRenderFns }
if (module.hot) {
  module.hot.accept()
  if (module.hot.data) {
    require("vue-hot-reload-api")      .rerender("data-v-650f2efa", module.exports)
  }
}


//////////////////
// WEBPACK FOOTER
// ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-650f2efa","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./resources/assets/js/components/Example.vue
// module id = ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-650f2efa","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./resources/assets/js/components/Example.vue
// module chunks = 0

我应该怎么做才能Example在源选项卡中看到真实且纯粹的 vue.js 组件？

Answer 1

您在浏览器中的源位置是否正确？webpack://您应该在分支下而不是分支下查看top。如果它有帮助，我的 webpack mix 已经devtool: 'source-map'代替devtool: 'eval-source-map'，我得到以下内容 - 请参阅下面的屏幕截图：

我可以很好地查看和调试所有源webpack://。