摘要:介绍种相同端口部署多个单页应用前端路由的方法。使用子域名区分,此种方法最是简单。子域名访问时路径,盘下面文件为的服务器目录。采用与作为区分,分别表示不同的项目。
目前web开发 使用一般前后端分离技术,并且前端负责路由。为了美观,会采用前端会采用h5 history 模式的路由。但刷新页面时,前端真的会按照假路由去后端寻找文件。此时,后端必须返回index(index.html)文件才不至于返回404。
nginx 部署一个单页应用很简单:location / { root html; try_files $uri /index.html index.html; }
root是web服务器目录,try_files 为文件匹配,先找真实的地址($uri),如果找不到,再找index.html文件。
#此处注意,history模式不可以使用相对位置引入方式(./)
但如果几个单页应用同时需要部署在同一台电脑上,并且都需要占用80或者443端口,就不太容易了。
介绍2种相同ip端口部署多个单页应用(前端路由)的方法。
使用子域名区分,此种方法最是简单。但是限制也大,必须要买域名,或者修改访问者电脑的hosts文件。
server { listen 80; server_name aa.gs.com; #子域名aa访问时 localtion / { root E:/ee; #windows 路径,E盘下面ee文件为aa.gs.com的服务器目录。 try_files $uri /index.html index.html; } } server { listen 80; server_name bb.gs.com; #访问子域名bb时。 location / { root /root/bb; # linux /root/bb文件夹作为服务器目录。 try_files $uri /index.html index.html; } }
采用路径的第一个文件夹名字作为区分。例如:https://aa.com/a/xx 与 https://aa.com/b/xx。采用a与b作为区分,分别表示不同的项目。
需要设置点:
前端打包后的文件引用地址,需要加上"/a/" "/b/"为前缀 。比如 (webpack 为设置publicPath: "/a")
前端的路由路径必须加上/a/前缀:比如真正地址test.com/ss,需改成test.com/a/ss
server { listen 80; root /root/test; #web服务器目录; location ^~ /a/{ try_files $uri /a/index.html; #如果找不到文件,就返回 /root/test/a/index.html } location ^~ /b/{ try_files $uri /b/index.html; #如果找不到文件,就返回 /root/test/b/index.html } }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114245.html
摘要:介绍种相同端口部署多个单页应用前端路由的方法。使用子域名区分,此种方法最是简单。子域名访问时路径,盘下面文件为的服务器目录。采用与作为区分,分别表示不同的项目。 目前web开发 使用一般前后端分离技术,并且前端负责路由。为了美观,会采用前端会采用h5 history 模式的路由。但刷新页面时,前端真的会按照假路由去后端寻找文件。此时,后端必须返回index(index.html)文件才...
摘要:介绍种相同端口部署多个单页应用前端路由的方法。使用子域名区分,此种方法最是简单。子域名访问时路径,盘下面文件为的服务器目录。采用与作为区分,分别表示不同的项目。 目前web开发 使用一般前后端分离技术,并且前端负责路由。为了美观,会采用前端会采用h5 history 模式的路由。但刷新页面时,前端真的会按照假路由去后端寻找文件。此时,后端必须返回index(index.html)文件才...
摘要:介绍种相同端口部署多个单页应用前端路由的方法。使用子域名区分,此种方法最是简单。子域名访问时路径,盘下面文件为的服务器目录。采用与作为区分,分别表示不同的项目。 目前web开发 使用一般前后端分离技术,并且前端负责路由。为了美观,会采用前端会采用h5 history 模式的路由。但刷新页面时,前端真的会按照假路由去后端寻找文件。此时,后端必须返回index(index.html)文件才...
摘要:怎么做前后端的分离我目前的做法是将作为一种服务存在,仅需要提供接口即可,前端目前采用,调用后端,解析数据,静态页面。采用,充当层,前后端实现了真正的分离,但还是有点问题的。 什么是前后端分离 对于这个问题,其实可以看看我的学习历程,我觉得很好的体现了Web开发模式的演化。 石器时代:那正是本人刚学JSP的时候,写了一个简单的商城DEMO,所有的业务逻辑,数据库的交互以及Javascri...
阅读 2410·2021-10-08 10:04
阅读 2701·2021-09-06 15:02
阅读 701·2019-08-30 13:50
阅读 1497·2019-08-30 13:21
阅读 2550·2019-08-30 11:15
阅读 2076·2019-08-29 17:19
阅读 1535·2019-08-26 13:55
阅读 1232·2019-08-26 10:15