使用./src、./build、./public目录时，如何用VSCode Live Server扩展？

问题背景 #

我最近学习了项目结构搭建，用TypeScript开发，遵循./src作为源码目录、./build作为编译输出目录的规范。静态资源（index.html、图片等）放在./public目录，通过package.json脚本把./public内容复制到./build，确保资源可访问。

但遇到了实时预览的问题：

• 直接在./public/index.html用VSCode Live Preview，无法访问/scripts目录的JS文件
• 在./build/index.html预览，必须每次执行npm run build才能看到修改

项目目录结构 #

❯ tree --gitignore
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── assets
│   ├── index.html
│   └── styles
│       └── style.css
├── src
│   └── scripts
│       └── index.ts
└── tsconfig.json

6 directories, 7 files

package.json内容 #

{
    "name": "jl_weather_app",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "tsc --noEmit",
        "prebuild": "rm -rf ./build/*",
        "build": "tsc && ncp ./public/ ./build/",
        "dev": "tsc-watch --onSuccess \"node ./build/scripts/index.js\""
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "ncp": "^2.0.0",
        "prettier": "^3.0.3",
        "tsc-watch": "^6.0.4",
        "typescript": "^5.2.2"
    }
}

launch.json内容 #

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

    // Great suggestions on how to set this up in this tutorial: https://www.youtube.com/watch?v=JdvkaW2xeiI
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Typescript",
            "preLaunchTask": "npm: build",
            "skipFiles": ["<node_internals>/**"],
            "program": "${workspaceFolder}/build/scripts/index.js",
            "outFiles": ["${workspaceFolder}/build/**/*.js"]
        }
    ]
}

解决方案 #

方案1：使用Vite（推荐） #

Vite是现代前端开发工具，内置热更新和开发服务器，完美适配TypeScript，无需复杂配置：

1. 安装Vite：

   npm install -D vite
   

2. 保留现有src和public目录结构，Vite会自动识别处理
3. 修改package.json脚本：

   "scripts": {
       "dev": "vite",
       "build": "tsc && vite build",
       "preview": "vite preview"
   }
   

4. 启动开发服务器：

   npm run dev
   

   修改public下的HTML/CSS或src下的TS文件时，浏览器会自动刷新预览。

方案2：增强现有脚本，配合live-server #

如果不想更换工具，可通过监听文件变化自动同步资源，并启动本地开发服务器：

1. 安装依赖：

   npm install -D live-server chokidar-cli
   

2. 修改package.json脚本：

   "scripts": {
       "test": "tsc --noEmit",
       "prebuild": "rm -rf ./build/*",
       "build": "tsc && ncp ./public/ ./build/",
       "dev:ts": "tsc-watch --onSuccess \"node ./build/scripts/index.js\"",
       "dev:public": "chokidar 'public/**/*' -c 'ncp ./public/ ./build/'",
       "dev:server": "live-server ./build",
       "dev": "npm run dev:ts & npm run dev:public & npm run dev:server"
   }
   

3. 启动开发环境：

   npm run dev
   

   这套脚本实现：
   • tsc-watch监听TS文件变化，自动编译并执行
   • chokidar-cli监听public目录变化，自动同步到build
   • live-server启动build目录的本地服务器，自动刷新页面

方案3：调整VSCode Live Preview配置 #

如果想用VSCode自带的Live Preview，可在.vscode/settings.json中添加配置：

{
    "livePreview.root": "/build"
}

启动Live Preview时选择build/index.html，配合方案2的自动同步脚本，即可实现实时预览。

关键注意点 #

• 所有修改必须在src和public目录进行，禁止直接修改build目录文件
• 热更新核心是监听文件变化、自动编译/同步资源、通知浏览器刷新三个环节
• Vite是当前最省心的方案，内置所有所需功能，无需手动拼接复杂脚本

内容的提问来源于stack exchange，提问作者brucey0x