Vue生产构建dist文件夹直接打开空白，用serve运行正常？

1. 资源路径解析逻辑差异 #

Vue项目默认的publicPath（Vue CLI 3+）或assetsPublicPath（Vue CLI 2）若配置为根路径'/'，直接通过file://协议打开index.html时，浏览器会从本地磁盘根目录查找静态资源（JS、CSS、图片等），而非dist文件夹内部，导致资源加载失败（控制台报404错误）。
而serve -s dist启动的HTTP服务会将dist文件夹设为网站根目录，相对路径能被正确解析，资源可正常加载。

2. 浏览器协议安全限制不同 #

file://协议下浏览器有严格的安全限制：

• 部分JS API（如fetch、部分场景下的localStorage）会被禁用，触发执行报错
• 跨域规则限制更严苛，本地文件间的资源引用也可能触发跨域拦截
  HTTP协议下则不存在这些限制，完全符合浏览器对网页运行环境的预期。

3. 路由模式的适配问题 #

若项目使用history模式路由，直接打开index.html时，file://协议无法处理路由路径解析——浏览器会把路由路径当作本地文件路径查找，自然找不到对应文件，页面空白。
serve -s dist会自动配置单页应用的 fallback 规则，所有路由请求都指向index.html，确保路由逻辑正常运行。

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