환경 설정 설정

1. 빨간 화살표 1번 RunandDebug 클릭

2. create a lunch.json file 클릭하여 json 파일 생성 후 아래 json 코드 입력

{
    "version": "0.2.0",
    "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "vuejs: chrome",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "breakOnLoad": true,
          "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
          }
        },
    ]
}

3. source폴더의 root(src 폴더와 같은 위치)에 vue.config.js 파일에 아래 코드 추가

module.exports = {
  configureWebpack: {
    devtool: 'source-map',
  },
}

4. npm run serve로 로컬 서버 실행 후 아래 run and debug그의 화면의 ▶ 버튼 클릭 하면 로컬 서버 8080 포트의 웹브라우저가 실행 되며 breakpoint 화살표 부분의 체크 박스가 선택 되어져 있는 source만 breakpoint에서 멈춰 값 watch로 값을 볼수 있음