如何用VS代码和Chrome使用VueJS (与Vue CLI和Webpack一起)调试SourceMaps 3类型记录项目？
Tl;dr VS代码调试器总是使用
Unbound breakpoint，但是在chrome工具中设置断点可以自动在VS代码中打开受人尊敬的文件(之后，用于该文件的VS代码调试器可以工作)。此外，chrome中的源代码(地图)文件有一些奇怪的名称，比如HelloWorld.vue?4a7c。
我建立了一个新的VueJS 3项目，使用vue create my_project的类型记录。我选择了打字稿，Babel和Vue版本3。
我正在尝试让VS代码调试器启动并运行，以像我以前使用Java这样的其他项目来调试我的项目。因此，我从VS代码配方方面复制了最佳实践。(由于没有VueJS类型记录调试配方，所以我使用了VueJS和类型记录的调试方法，并尝试将它们混合在一起)
实际的问题是，当我在VS代码中设置一个断点时，它说是Unbound breakpoint。我的假设是VS代码不能将任何源图文件映射到我的源文件，这表明webpack以某种方式搞砸了文件的命名，或者我的文件映射配置是错误的。
到目前为止，我得到的工作是，当我使用chrome工具检查项目时，我看到了一个main.ts，在这里我可以设置断点，一旦命中断点，文件就会在VS代码中打开，调试器(至少对于这个特定的文件)可以正常工作。当涉及到.vue文件时，事情会变得更加混乱。在chrome中，.vue文件被混淆/编译，但是有一些文件名为[file-name].vue?[4-digit-hex-value] (例如HelloWorld.vue?4a7c)，其中包含实际的源代码和设置断点，文件将在VS代码中自动打开。
如果有人能提供在他们的设置中工作的配置，这将对我有很大的帮助。
到目前为止，我有以下配置文件：
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"pathMapping": {
"/_karma_webpack_": "${workspaceFolder}"
},
"sourceMapPathOverrides": {
"webpack:/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
},
"preLaunchTask": "serve"
}
]
}tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "serve",
"type": "npm",
"script": "serve",
"isBackground": true,
"problemMatcher": [{
"base": "$tsc-watch",
"background": {
"activeOnStart": true,
"beginsPattern": "Starting development server",
"endsPattern": "Compiled successfully"
}
}],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}(npm serve只执行in package.json定义的脚本"serve": "vue-cli-service serve")
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"useDefineForClassFields": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
devtool: 'source-map',
}
})回答 1
Stack Overflow用户
发布于 2022-04-06 19:49:25
我现在要提出的解决方案如下：
(我不知道幕后发生了什么，但不知怎么起作用了--真的不知道生成了什么源地图。)
我只是使用官方的VS代码附加Chrome调试设置，并添加了一个预启动任务来启动开发人员服务器，该服务器以dev模式为应用程序提供服务。不知怎么的，这是它所需要的全部工作，与一个功能齐全的VS代码调试器和VueJS 3类型记录应用程序(实际上也安装了尾风)。
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "My VueJS Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"preLaunchTask": "serve",
// "userDataDir": "${env:HOME}/.vscode/vscode-chrome-debug-userdatadir"
// This config is to always use the same configuration for the chrome app (system wide)
// therefore you can install the prefered extensions once and they will stay!
// Taken from here: https://stackoverflow.com/questions/51725854/run-vscode-chrome-debugger-with-its-extensions
}
]
}tasks.json (这是正式的VueJS VS代码启动前任务配方)
{
"version": "2.0.0",
"tasks": [
{
"label": "serve",
"type": "npm",
"script": "serve",
"isBackground": true,
"problemMatcher": [{
"base": "$tsc-watch",
"background": {
"activeOnStart": true,
"beginsPattern": "Starting development server",
"endsPattern": "Compiled successfully"
}
}],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}只要将这两个文件放到项目根目录的.vscode目录中，您就可以开始了！
非主题(安装尾风)：
使用这里的官方设置指南--只是调整使用vue cli创建而不是vite。
安装1.安装尾部文件、postcss和自动重定位器--同时生成
与国家预防机制：
npm install -D tailwindcss postcss autoprefixer与纱线：
yarn add tailwindcss postcss autoprefixer现在生成配置文件：
npx tailwindcss init -p将以下两行添加到tailwind.config.js 文件中：
的重点是：
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",因此，文件应该如下所示：
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}创建一个./src/index.css @tailwind 文件，并为尾风的每个层添加@tailwind指令。
@tailwind base;
@tailwind components;
@tailwind utilities;将新创建的./src/index.css 文件导入 ./src/main.js 文件.中。
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')注意import './index.css'
就是这样。只需将其与npm run serve或yarn serve或此答案顶部描述的设置一起使用即可。
https://stackoverflow.com/questions/71760994
复制相似问题
腾讯云开发者
