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

"本文主要探讨了如何将基于Vue或React的单页面应用(SPA)正确部署到服务器，解决常见的资源加载、路由访问和404错误等问题。文章建议使用Nginx、Apache或Tomcat等Web代理服务器，并提供了具体的Nginx配置示例。" 在部署Vue或React这类单页面应用时，由于其特殊的前端路由机制，直接通过服务器访问index.html可能会导致资源找不到或刷新页面时出现404错误。因此，正确的方法是将应用部署到如Nginx、Apache或Tomcat这样的Web服务器中，利用它们的反向代理功能处理路由请求。 首先，根据项目部署的实际路径，调整前端路由设置。如果项目位于域名的根目录下，例如`http://www.sosout.com`，那么根路由应为'/'。如果项目在子目录中，比如`http://www.sosout.com/children`，则根路由应为'/children'。 以Nginx为例，配置步骤如下： 1. 定义项目文件目录，比如 `/mnt/html/spa`，这个目录下存放的是构建工具（如npm run build）生成的生产环境文件。 2. 配置Nginx的服务器块，监听80端口，指定server_name为项目域名，如`spa.sosout.com`。 3. 设置root指向项目文件夹，并指定index为`index.html`，以便Nginx能正确找到启动页面。 4. 对于静态资源，如`favicon.ico`，可以设置单独的location来处理。 5. 对于所有其他请求，使用`try_files`指令，尝试按顺序查找文件。如果文件不存在，则返回/index.html，这是为了处理前端路由。 6. 设置proxy_set_header以传递必要的HTTP头信息，确保在代理过程中保持请求的原始信息。 7. 配置日志文件路径，记录访问日志。 以下是Nginx配置示例： ``` server { listen 80; server_name spa.sosout.com; root /mnt/html/spa; index index.html; location /favicon.ico { root /mnt/html/spa; } location / { try_files $uri $uri/ /index.html; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } access_log /mnt/logs/nginx/access.log main; } ``` 特别注意，当使用React的`browserHistory`模式或Vue的`history`模式时，由于它们依赖HTML5 History API进行路由，需要在Nginx配置中进行额外的路由重写，以避免刷新页面时的404错误。 总结来说，正确部署Vue或React单页面应用的关键在于理解前端路由的工作原理，并结合Web服务器的配置，确保所有请求都能正确地被代理到`index.html`，从而实现平滑的页面跳转和资源加载。同时，根据实际项目需求调整路由配置，以满足不同部署环境的需要。