Vue项目部署测试环境，SockJS-Node跨域问题及解决方案
在Vue项目开发中，本地环境运行良好，但部署到测试环境（10.181.12.125:30016）后，却出现SockJS-Node跨域报错，错误信息指向http://localhost:8080/sockjs-node/info?t=xxx路径访问失败。这是因为本地构建后，使用npm run start命令启动了开发服务器（webpack-dev-server），该服务器监听本地8080端口。 然而，实际部署地址为10.181.12.125:30016，端口不一致导致跨域。
问题关键在于开发服务器（webpack-dev-server）仅适用于本地开发，用于热更新等功能，它并不知道实际部署地址。 因此，在热更新请求时，它仍然尝试访问localhost:8080，与实际部署服务器的30016端口冲突。
解决方案： 避免在测试或生产环境使用开发服务器。 正确的部署流程如下：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
-
使用
npm run build命令构建项目： 此命令生成用于生产环境的优化后的静态文件。 -
使用专业Web服务器部署： 将步骤1生成的静态文件部署到专业的Web服务器（如Nginx、Apache等）。 Web服务器将负责提供这些静态资源。 正确配置Web服务器的反向代理或其他必要设置，解决跨域问题。
通过这种方式，前端应用将直接从Web服务器获取资源，不再依赖开发服务器，从而避免端口不一致导致的跨域错误。 切记：npm run start命令仅用于本地开发环境。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
