单页面应用（Vue、React）部署到服务器全攻略

"本文主要探讨了Vue.js和React.js等单页面应用的部署到服务器的正确方法，重点讲解了如何配置Nginx服务器以解决常见的部署问题，如资源找不到、直接访问HTML空白页以及刷新路由时出现404错误。" 在开发Vue或React等单页面应用程序（SPA）时，本地运行一切顺利，但在部署到生产环境时往往会出现各种问题，主要是由于前端路由的处理方式与服务器默认行为不匹配。单页面应用通常需要一个Web服务器作为代理，以正确处理路由请求。Nginx、Apache或Tomcat等服务器软件能够很好地胜任这个角色。 首先，对于项目部署的位置，要根据项目在域名结构中的位置来设置。如果项目位于顶级域名下，例如`http://www.sosout.com`，那么根路由就是'/'。如果项目位于一个子目录中，如`http://www.sosout.com/children`，根路由应设置为'/children'。 以Nginx为例，部署步骤如下： 1. 首先，确保项目已经通过`npm run build`或类似命令打包成生产环境的静态资源，这些资源通常位于`dist`目录下。 2. 确定项目文件在服务器上的路径，例如 `/mnt/html/spa`，这将作为Nginx的根目录。 3. 修改Nginx的配置文件`nginx.conf`，添加一个新的`server`块。设置监听端口为80，配置服务器名称为`spa.sosout.com`。 4. 设置`root`指令为项目文件的路径，并指定`index.html`为默认索引文件。 5. 对于处理静态资源，如`favicon.ico`，创建一个特定的`location`块，指向项目的静态资源目录。 6. 最重要的部分是处理所有其他路由的`location /`块。这里使用`try_files`指令来查找文件，如果没有找到实际的文件，则返回`index.html`，让前端路由接管处理。 7. 添加其他必要的HTTP头，如`Host`、`X-Real-IP`、`X-Forwarded-For`和`X-Forwarded-Proto`，以支持反向代理。 8. 设置日志文件路径，以便记录服务器访问信息。 部署注意事项： 1. 使用80端口配置服务器，使得用户可以直接通过域名访问，无需指定端口号。 2. 如果设置了自定义域名，需要在DNS解析中添加对应的A记录或CNAME记录，指向服务器IP。 以上配置完成后，重启Nginx服务以使配置生效。此时，用户应能正常访问SPA应用，无论直接访问主页还是通过任何路由，都不会出现404错误。对于使用了React Router的项目，配置原理与Vue的Vue Router相似，都需要确保服务器能够将所有未明确的路由重定向至`index.html`。