最近好多伙伴说，我用vue做的项目本地是可以的，但部署到服务器遇到好多问题：资源找不到，直接访问index.html页面空白，刷新当前路由404。。。用react做的项目也同样遇到类似问题。现在我们一起讨论下单页面如何部署到服务器？
由于前端路由缘故，单页面应用应该放到nginx或者apache、tomcat等web代理服务器中，千万不要直接访问index.html，同时要根据自己服务器的项目路径更改react或vue的路由地址。
如果说项目是直接跟在域名后面的，比如: ，根路由就是 'https://www.jb51.net/'。
如果说项目是直接跟在域名后面的一个子目录中的，比如: ，根路由就是 '/children '，不能直接访问index.html。
以配置Nginx为例，配置过程大致如下：（假设：
1、项目文件目录： /mnt/html/spa（spa目录下的文件就是执行了npm run dist 后生成的dist目录下的文件）
2、访问域名：spa.sosout.com）
进入nginx.conf新增如下配置：
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; }
注意事项：
1、配置域名的话，需要80端口，成功后，只要访问域名即可访问的项目
2、如果你使用了react-router的 browserHistory 模式或 vue-router的 history 模式，在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/ @fallback; index 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; } location @fallback { rewrite ^.*$ /index.html break; } access_log /mnt/logs/nginx/access.log main; }
为什么要重写路由？因为我们的项目只有一个根入口，当输入类似/home的url时，如果找不到对应的页面，nginx会尝试加载index.html，这是通过react-router或vue-router就能正确的匹配我们输入的/home路由，从而显示正确的home页面，如果browserHistory模式或history模式的项目没有配置上述内容，会出现404的情况。
简单举两个例子，一个vue项目一个react项目：
vue项目：
############ # 其他配置 ############ http { ############ # 其他配置 ############ server { listen 80; server_name tb.sosout.com; root /mnt/html/tb; index index.html; location ~ ^/favicon\.ico$ { root /mnt/html/tb; } location / { try_files $uri $uri/ @fallback; index 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; } location @fallback { rewrite ^.*$ /index.html break; } access_log /mnt/logs/nginx/access.log main; } ############ # 其他配置 ############ }
import App from '../App' // 首页 const home = r => require.ensure([], () => r(require('../page/home/index')), 'home') // 物流 const logistics = r => require.ensure([], () => r(require('../page/logistics/index')), 'logistics') // 购物车 const cart = r => require.ensure([], () => r(require('../page/cart/index')), 'cart') // 我的 const profile = r => require.ensure([], () => r(require('../page/profile/index')), 'profile') // 登录界面 const login = r => require.ensure([], () => r(require('../page/user/login')), 'login') export default [{ path: 'https://www.jb51.net/', component: App, // 顶层路由，对应index.html children: [{ path: '/home', // 首页 component: home }, { path: '/logistics', // 物流 component: logistics, meta: { login: true } }, { path: '/cart', // 购物车 component: cart, meta: { login: true } }, { path: '/profile', // 我的 component: profile }, { path: '/login', // 登录界面 component: login }, { path: '*', redirect: '/home' }] }]
react项目：
