如何配置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的source选项卡中看到这样的：

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混合有devtool: 'source-map'而不是devtool: 'eval-source-map'我得到以下 - 见下面的截图：

我可以查看和调试webpack://下的所有源代码。