live server 404因路径以workspacefolder为根目录，需将css/js放/public或用./相对路径；cdn框架不生效多因加载顺序错误，应确保初始化代码在脚本后且调用mount；tailwind/bootstrap不生效是缺构建或未引入依赖如popper；code runner不适用html开发，应改用live server。
Live Server 启动后外部 CSS/JS 仍 404
不是框架没下载，而是路径解析错位了。Live Server 默认以 workspaceFolder（你用 File → Open Folder 打开的文件夹）为 Web 根目录 /，所有相对路径都从这里算起。
常见错误现象：
-
<link rel="stylesheet" href="css/tailwind.css">报 404：实际文件在/src/css/tailwind.css，但服务器只认/css/tailwind.css -
<script src="node_modules/vue/dist/vue.global.js"></script>失败：浏览器不允许直接读取node_modules，且该路径不在 Web 可访问范围内
实操建议：
- 把框架文件（如
tailwind.css、vue.global.js）手动复制到项目根目录下可访问的路径，比如/public/或/assets/，再改href/src为"/public/tailwind.css" - 用
./显式声明当前目录：<link rel="stylesheet" href="./css/tailwind.css">（前提是该 HTML 文件和css/在同一级目录） - 别在 HTML 中直接引用
node_modules—— 它是 Node.js 构建时概念，浏览器里不存在这个路径
CDN 引入的框架功能不触发（如 Vue 模板未渲染）
看起来代码写了，控制台也没报错，但页面就是不响应。大概率是脚本加载顺序或执行时机问题。
典型场景：
-
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>放在底部，但<div id="app">{{ msg }}</div>上面的<script>const app = Vue.createApp(...)</script>已提前执行，此时 DOM 还没挂载 - 用了
type="module"但没加defer，导致模块脚本阻塞解析，而模板已渲染完毕
实操建议：
- 确保 Vue/React 初始化代码在 CDN 脚本之后，且放在
前；或者统一用defer：<script src="..." defer></script> - 检查浏览器开发者工具的
Console和Network标签：确认 CDN 地址返回 200，且没有CORS或MIME type错误（比如返回text/plain而不是application/javascript） - Vue 3 全局构建需显式调用
app.mount('#app')，漏掉这句就不会生效
本地开发时 Tailwind 或 Bootstrap 的 class 不生效
HTML 正常加载，CSS 文件也 200 成功，但 class 名字写了没反应。这不是 Live Server 的锅，而是框架本身需要构建流程或配置注入。
原因分两类：
-
Tailwind：仅引入
tailwind.css文件是白搭，它本质是“按需生成 CSS”的工具。没跑tailwindcss -i ./src/input.css -o ./dist/output.css --watch，那 CSS 里就只有@tailwind base等占位指令，没真实样式 - Bootstrap：引入 CSS 后还需 JS 组件支持（如 dropdown、modal），而它的 JS 依赖 Popper.js —— 若只引了 Bootstrap JS，没引 Popper，组件会静默失败
实操建议：
- Tailwind 初学者直接用 CDN：
<script src="https://cdn.tailwindcss.com"></script>，它内置 JIT 编译器，class 写完立刻生效 - Bootstrap 请用完整 CDN 链接，含 Popper：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> - 别在
settings.json里乱加"tailwindCSS.includeLanguages"类配置——那是给插件提示用的，不解决运行时生效问题
Code Runner 运行 HTML 时框架完全不加载
点右上角 ▶️ 运行按钮，弹出浏览器但空白，连 console.log 都没执行。这是 Code Runner 的根本限制：它用 file:// 协议打开 HTML，而现代浏览器对 file:// 施加了严格限制。
直接后果：
- fetch 请求被跨域拦截（即使请求的是同目录 JSON）
- 本地
import语句失败（Failed to resolve module specifier） - 某些框架（如 Vite、SvelteKit）的 dev server 功能彻底不可用
实操建议：
- 立刻停用 Code Runner 运行 HTML —— 它只适合纯 JS 脚本调试，不适合任何带外部依赖的前端页面
- 改用 Live Server 插件，或终端起服务：
npx serve -s（需先npm install -g serve），确保地址是http://开头 - 如果非要用 Code Runner，请在
settings.json中禁用它对 HTML 的支持："code-runner.fileDirectoryAsCwd": true+ 手动配"code-runner.executorMap"调用open或start命令打开浏览器，但这仍是绕远路
最易被忽略的一点：框架是否真的“引入成功”，和它是否“运行正确”是两件事。404 是路径问题，200 但无效是构建/初始化问题，控制台静默无报错却没效果，往往卡在 mount 或 hydration 阶段——这时候得去查框架文档里 “Getting Started” 最上面三行代码有没有抄全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
