vue,react,angular本地配置nginx 环境单页面应用

时间 2019-11-09

标签 vue react angular 本地配置 nginx 环境页面应用栏目 React 繁體版

原文原文链接

1、原由：项目使用VUE，和react。构建单页面应用。在nginx的环境下只有一个index.html入口。这时候默认可以访问到vue，和react 路由html

配置中的首页。内部链接也可以跳转可是不能给刷新也面。刷新页面后就为变为404页面。vue

2、缘由：nginx 在解析路径的时候：好比： localhost/a 这个路由。其实nginx 在解析路径时候。为去root根路径下去找a文件。可是找不到。全部就会报错。react

可是在单页面应用中localhost/a 实际上是 VUE, 和react 内部制定的路由规则。这时候。就出现问题了。该如何配置呢？ nginx

3、配置文件。vue-router

 server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        location /home {
            rewrite .* /index.html break;
            root   html;
        }
        location /strategy {
            rewrite .* /index.html break;
            root   html;
        }
        location /wealthMange {
            rewrite .* /index.html break;
            root   html;
        }
        location /aboutUs {
            rewrite .* /index.html break;
            root   html;
        }
        location /contacts {
             rewrite .* /index.html break;
             root   html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }    
    }

经过rewrite .* /index.html break;把一切path重写为/index.html,break很重要,它使得url的匹配结束，最终服务返回的文档实际上是/htm/index.html。浏览器

那个break决定了浏览器里的url是不变的，而http响应的文档其实就是index.html，而浏览器上的path，会自动的被vue-router处理，进行无刷新的跳转，咱们看到的结果就是path对应了那个页面！url

location /home {
            rewrite .* /index.html break;
 root html; }
当咱们浏览器输入这样 localhost/home 是 重定向为 rewrite .*/index.html break; root html; 至关于咱们home 页面。就样就OK 啦。

4、Apache 下的单页面应用配置

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

.htaccess 把这个文件的内容改成上面的代码就能够了。spa

5、nginx的简单配置方法code

location / {
  try_files $uri $uri/ /index.html;
}

一行代码就能够搞定。不用写那么多路由规则啦。router

哈哈是否是很爽啊。？？？