Vue项目执行yarn build生成dist文件夹后运行index.html出现空白页求助

嘿，我看了你遇到的问题，结合控制台里的报错信息，这两个错误就是导致页面空白的元凶，咱们一步步来解决：

1. 先搞定OneSignal的域名限制问题 #

控制台里的OneSignalError明确说了，你的Web推送配置只允许在https://example.com上运行，但你现在是本地打开的http://localhost:8080，这个脚本报错直接阻塞了页面渲染。

解决办法分两种情况：

• 如果你只是本地测试dist包，不想启用OneSignal：找到项目里初始化OneSignal的代码，加个环境判断，只在生产环境且域名匹配时才初始化，比如：

  if (process.env.NODE_ENV === 'production' && window.location.hostname === 'example.com') {
    // 这里放OneSignal的初始化代码
  }
  

• 如果你需要在本地测试OneSignal功能：登录OneSignal后台，找到你的应用设置，把http://localhost:8080添加到「允许的来源」列表里就行。

2. 再处理sockjs-node的请求失败问题 #

sockjs-node是webpack-dev-server用来做热更新的服务，生产打包后的代码里根本不该有这个请求。出现这个问题，大概率是你项目里不小心把开发环境的代码打包进去了。

你可以这么排查：

• 检查src/main.js或者其他全局脚本，有没有引入和热更新、devServer相关的代码，确保这些代码只在开发环境下执行，比如用process.env.NODE_ENV === 'development'做判断。
• 确认vue.config.js里的devServer配置没问题——这个配置只会在开发模式下生效，打包时不会被包含，所以重点还是看业务代码里的逻辑。
• 重新跑一遍yarn build --mode production，明确指定生产环境打包，避免意外。

最后验证一下 #

修改完之后重新打包，别直接双击index.html打开（直接打开是file协议，容易有资源加载问题），用本地服务器启动dist文件夹，比如执行npx serve dist，然后访问对应的地址，应该就能正常看到页面了。

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