HTML编辑器本身不负责打包发布，它只管写代码；真正打包发布要靠构建工具、本地服务或封装框架——选错路径，双击 index.html 就会报 Access to script at 'file:///' from origin 'null' has been blocked。
直接说结论：HTML编辑器本身不负责打包发布，它只管写代码；真正打包发布要靠构建工具、本地服务或封装框架——选错路径，双击 index.html 就会报 Access to script at 'file:///' from origin 'null' has been blocked。
为什么双击打开 index.html 会失败
浏览器在 file:// 协议下禁止跨文件加载资源：fetch JSON、import 模块、@import CSS、甚至某些图片引用都会被拦截。这不是你代码写错了，是安全策略强制限制。
- 临时验证：进项目目录运行
python3 -m http.server 8000，然后访问http://localhost:8000 - VS Code 用户装「Live Server」插件，右键点
index.html→ “Open with Live Server” - Node.js 用户可全局装
serve：npm install -g serve，再运行serve -s .
用 Vite / Webpack 打包生成 dist 目录
这是现代前端的标准流程，适用于含 JS 交互、模块导入、CSS 预处理的项目。核心是让构建工具接管所有路径解析和资源注入。
- 确保
index.html在src/下（不是直接丢在dist/），否则构建时无法注入 JS/CSS 哈希名 - Vite 项目：改
vite.config.js的base字段——部署到子路径用base: '/myapp/'，本地双击测试用base: './' - Webpack 项目必须加
html-webpack-plugin：npm install --save-dev html-webpack-plugin，并在配置中指定template: './src/index.html' - 执行
npm run build后，检查dist/是否有index.html+ 带哈希名的.js/.css+ 正确路径的资源引用
打包成 ZIP 发给别人能直接跑吗
可以，但有硬性前提：所有路径必须是相对路径，且接收方不能双击打开，得用本地服务启动。
立即学习“前端免费学习笔记（深入）”；
- 根目录必须有
index.html，CSS/JS 图片等全放在子目录如./css/main.css - 避免中文、空格、大写字母路径——Windows 和 macOS 对大小写不敏感，Linux 敏感，统一小写最稳
- 压缩前确认编码为 UTF-8（尤其含中文注释或内容时），否则别人解压后可能乱码
- 别用「网页另存为」——它生成的路径常是绝对路径，且漏掉动态加载的资源
想打包成 .exe 或桌面应用怎么办
这已经超出“静态发布”范畴，属于应用封装。Electron 体积大但兼容强；Tauri 更轻但需 Rust 环境；Nativefier 最快上手。
- Electron：写好
main.js加载本地index.html，配electron-builder打包，生成几百 MB 的.exe - Tauri：适合不想带 Chromium 的场景，但开发机必须装 Rust，
npx tauri init后指定前端目录为当前项目即可 - Nativefier：命令一行搞定：
nativefier --name "MyApp" --platform win32 ./index.html，输出即用，无须写代码 - 注意：所有方案都要求
index.html中资源路径是相对的，否则打包后路径断裂
最容易被忽略的一点：无论用哪种方式，只要用了 fetch('./data.json') 或 import('./utils.js')，就绝不能依赖双击打开——这个限制从 Chrome 45 沿用至今，没有绕过方案，只有换协议。
