Блог

Я уже несколько дней занимаюсь поиском в Интернете и решил опубликовать то, что у меня есть, в надежде найти кого-нибудь, кто сможет понять, что здесь происходит. Я попробовал и проверил результаты каждой возможной итерации sourcemappathoverrides. Похоже, это основные проблемы с рецептами отладки из vue. Они должны быть изменены для вашей структуры кода. Я также попытался изменить конфигурации в babel, webpack, babel-loader и всех внутренних файлах vscode. Прямо сейчас у меня есть это, чтобы я мог надежно переходить к точкам останова, если я отключу отладчик javascript для предварительного просмотра в vscode. Хотя это работает, требуется несколько минут (я не преувеличиваю), чтобы достичь точки останова в vscode. Пока это происходит, vscode полностью не отвечает. когда включен отладчик по умолчанию (использовать предварительный просмотр), точки останова, которые попадают в код, мгновенно попадают, но не там, где я их разместил изначально. После запуска кода вы не сможете установить точки останова во многих местах. Я знаю, что это указывает на проблему с исходной картой, но те же исходные карты отлично работают при возврате к старому отладчику javascript. Это моя текущая конфигурация.

Это моя конфигурация webpack (я только недавно добавил раздел babel-loader, который не имеет никакого значения)

// webpack.config.js

 
    module.exports = {
      // ...
      entry: {
        "app": "src/main.js"
      },
      //mode: 'development',
      rules: [
        {
          test: /.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                '@vue/app'
              ]
            }
          }
        }
      ]
    };
 

Это мой файл vue.config (я безуспешно пытался изменить параметры publicpath, compress, chaingwebpackoptions)

 
    const CopyPlugin = require('copy-webpack-plugin')
    
    module.exports = {
    
      pages: {
        index: {
          entry: 'src/index.js',
          template: 'public/index.html',
          filename: 'index.html'
        }
      },
      devServer: {
        clientLogLevel: 'warning',
        hot: true,
        contentBase: 'dist',
        compress: false,
        open: true,
        overlay: { warnings: false, errors: true },
        publicPath: '/',
        quiet: true,
        watchOptions: {
          poll: false,
          //I want to be able to jump into node_modules to debug
          ignored: /node_modules/
        }
      },
      chainWebpack: config => {
        config.plugins.delete('prefetch-index'),
        config.module
          .rule('vue')
            .use('vue-loader')
              .tap(args => {
                args.compilerOptions.whitespace = 'preserve'
              })
      },
      productionSourceMap: false,
      assetsDir: './assets/',
      configureWebpack: {
        devtool: 'source-map',
        plugins: [
          new CopyPlugin({
            patterns: [
              { from: 'src/assets/img', to: 'assets/img' },
              { from: 'src/assets/logos', to: 'assets/logos' },
              { from: 'src/assets/fonts', to: 'assets/fonts' }
            ],
          }),
        ]
      }
    }
 

this is my jsonconfig (just recently commented out the webpack.config. It doesn’t matter either way)

     {
        /*"include": [
          "webpack.config.js"    
        ],*/
        "compilerOptions": {
          "sourceMap": true
        }
      }
 

my babel config (originally I had no «env» section. Adding this made no difference)

     module.exports = {
      "env":{
        "development":{
          "sourceMaps":true,
          "retainLines":true,
        }
      },
      presets: [
        '@vue/app'
      ]
    }
 

это моя конфигурация запуска (именно на нее я потратил больше всего времени. Я устал от каждой комбинации под солнцем sourcemappathoverrides и webroot с или без /src). Привязка исходной карты в журналах кажется правильной, но точки останова перескакивают с того места, где они отброшены, или вообще не могут быть установлены.

     {
        "version": "0.2.0",
      "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "trace":"verbose",
          //also right click on your chrome icon and add this to the target field (--remote-debugging-port=9222)
          "port": 9222,
          "name": "vuejs: chrome",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}",
                "breakOnLoad": true,
                "sourceMapPathOverrides": {
                  "webpack:/*": "${webRoot}/*",
                  "/src/*": "${webRoot}/*",
                  "/./~/*": "${webRoot}/node_modules/*"
                },
          "preLaunchTask": "vuejs: start"
        }
      ]
      }
 

и, наконец, моя задача запустить Chrome после запуска приложения

     {
        "version": "2.0.0",
        "tasks": [
          {
            "label": "vuejs: start",
            "type": "npm",
            "script": "serve",
            "isBackground": true,
            "presentation": {
              "reveal": "always",
              "panel": "shared",
            },
            "problemMatcher": {
              "owner": "typescript",
              "fileLocation": "relative",
              "pattern": {
                "regexp": "^([^\s].*)\((\d |\,\d |\d ,\d ,\d ,\d )\):\s (error|warning|info)\s (TS\d )\s*:\s*(.*)$",
                "file": 1,
                "location": 2,
                "severity": 3,
                "code": 4,
                "message": 5
              },
              "background": {
                "activeOnStart": true,
                "beginsPattern": ".",
                "endsPattern": "App running at",
              }
          }
    
          }
          
        ]
    }