前端 - vue2 源码调试，如何调试 .vue文件?

Question

想要实现的目的是：调试 .vue 文件，能在src源码中打断点

// Vue-2.6.14  package.json
"scripts": {
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap",
    "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler --sourcemap",

添加--sourcemap后，就可以在调试examples中案例时在src源码中打断点。
但是examples里的案例并没有使用 .vue 文件的，都是把html文件中的DOM作为模板
所以我在 examples/todomvc下加了一个 test.vue 文件

<template>
    <div>.vue文件</div>
</template>

<script>
export default {
    name: 'test'
}
</script>

app.js文件内容改为

import test from './test'
new Vue({
    el: '#wrapper',
    components: {
        test
    },
    render: h => h(test)
})

提示 caught SyntaxError: Cannot use import statement outside a module
试了网上给的几个解决方案，包括在package.json中添加 "type": "module" ,无效
不知道是不是哪个地方没有配置好，该怎么修改?

Answer 1

我一般直接在浏览器里打断点，只要配置好 sourcemap，就能在 Devtools > Source 里打断点了。