八、 Vue3+vite源码设置断点调试

最新推荐文章于 2024-06-21 09:18:51 发布

bbill

最新推荐文章于 2024-06-21 09:18:51 发布

阅读量1k

点赞数 8

分类专栏： vue，jeecgboot，vben前端源码学习前端源码分析文章标签： node.js vue css 前端 npm

本文链接：https://blog.csdn.net/bbill/article/details/135693032

版权

vue，jeecgboot，vben前端源码学习同时被 2 个专栏收录

24 篇文章 2 订阅

订阅专栏

前端源码分析

23 篇文章 0 订阅

订阅专栏

本文详细解释了VSCode中的launch.json配置，用于启动Chrome和Edge，vite.config.ts中的构建设置，以及package.json中scripts部分的项目构建命令。重点介绍了如何在开发过程中管理和启动浏览器以进行调试。

摘要由CSDN通过智能技术生成

1， .vscode\launch.json文件配置

"configurations": [
        
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:3100",
            "webRoot": "${workspaceFolder}/src",
            "cwd": "${workspaceRoot}",
            "sourceMaps":true,
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/src/*"
              },
        }
    ]

2，vite.config.ts配置

build: {
target: ‘es2015’,
………………………………….
chunkSizeWarningLimit: 2000,
//后面这2句子
minify: env.NODE_ENV == “production”,
sourcemap: true,
},

3，package.json配置scripts：

build项目如下

"scripts": {
    "bootstrap": "yarn install",
    "serve": "npm run dev",
    "dev": "vite",
    "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
    "build": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build -m development --watchAll && esno ./build/script/postBuild.ts",

打开edge的配置

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-msedge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:3100",
            "webRoot": "${workspaceFolder}"
        }
    ]
}