天天看点

nginx 一个端口布署多个单页应用(history路由模式)。

nginx 一个端口布署多个单页应用,采用h5 history模式路由

目前web开发 使用一般前后端分离技术,并且前端负责路由。为了美观,会采用前端会采用h5 history 模式的路由。但刷新页面时,前端真的会按照假路由去后端寻找文件。此时,后端必须返回index(index.html)文件才不至于返回404。

root是web服务器目录,try_files 为文件匹配,先找真实的地址($uri),如果找不到,再找index.html文件。

#此处注意,history模式不可以使用相对位置引入方式(./)

但如果几个单页应用同时需要部署在同一台电脑上,并且都需要占用80或者443端口,就不太容易了。

使用子域名区分,此种方法最是简单。但是限制也大,必须要买域名,或者修改访问者电脑的hosts文件。

采用路径的第一个文件夹名字作为区分。例如:<code>https://aa.com/a/xx</code> 与 <code>https://aa.com/b/xx</code>。采用<code>a</code>与<code>b</code>作为区分,分别表示不同的项目。

需要设置点:

前端打包后的文件引用地址,需要加上<code>'/a/'</code> <code>'/b/'</code>为前缀 。比如<code>&lt;script scr="/a/test.js"&gt;&lt;/script&gt;</code>(webpack 为设置publicPath: '/a')

前端的路由路径必须加上<code>/a/</code>前缀:比如真正地址<code>test.com/ss</code>,需改成<code>test.com/a/ss</code>

继续阅读