目前前端开发普遍采用单页面技术开发，比如：VueJs，ReactJs等，这种开发技术的特点是前端负责路由分析和匹配。当用户输入URL并刷新页面时，浏览器根据虚假路由向服务器请求文件。这时候服务器需要返回index.html文件，否则会出现404错误。部署单页应用非常简单location/{roothtml;try_files$uri/index.htmlindex.html}知识点：root，表示web服务器目录try_files，尝试匹配实际路由（$uri），如果没有找到，则返回index.html部署多个单-页面应用。如果遇到比较复杂的需求，在同一台服务器上部署多个单页应用，同时使用80（或443）端口，应该如何处理？目标假设有2个单页应用需要部署，通过不同的前缀定向访问。https://abc.com/a/xxx，访问a项目https://abc.com/b/xxx，访问b项目策略为了达到上面的效果，我们只需要在项目打包阶段设置一下和nginx网关配置阶段Item前缀。1.打包阶段打包的重点是在文件引用地址上加上自己的前缀。例如：在项目a中的文件引用地址添加/a/前缀，在项目b中的文件引用地址添加/b/前缀实现方法：output:{filename:'assets/[name].js',path:resolve(__dirname,'../','dist'),publicPath:'/a/'}知识点：publicPath，为打包静态资源添加指定前缀。官方描述：`publicPath配置选项在各种场景中都非常有用。它允许您为应用程序中的所有资产指定基本路径。`2。nginx网关阶段服务器{listen80;根HTML；位置^~/a/{try_files$uri/a/index.html;}location^~/b/{try_files$uri/b/index.html;}知识点：语法规则location[=|~|~*|^~]/uri/{...}符号含义=开头表示完全匹配^~开头表示uri以正则开头string，可以理解为匹配url路径。nginx没有对url进行编码，所以请求是/static/20%/aa，可以通过规则匹配^~/static//aa（注意是空格）~开头表示区分大小写正则匹配~*开头表示不区分大小写写正则匹配/通用匹配，任何请求都会匹配验证1，准备2个独立的spa应用，配置publicPath为/a/和/b/output:{path:path.resolve(__dirname,"dist"),文件名:"[name].js",publicPath:"/a/",}2.配置nginx网关路由匹配规则server{listen80;位置^~/a/{root/usr/share/nginx/html;try_files$uri/a/index.html;}location^~/b/{root/usr/share/nginx/html;try_files$uri/b/index.html;}}3。启动dockerdockerpullnginx:1.17.10dockerrun--namenginx-demo-p80:80-v/Users/huahua/Documents/lian/code/multi-spa-demo/project-a/dist/:/usr/share/nginx/html/a:ro-v/Users/huahua/Documents/lian/code/multi-spa-demo/project-b/dist/:/usr/share/nginx/html/b:ro-v/Users/huahua/Documents/lian/code/multi-spa-demo/nginx.conf:/etc/nginx/nginx.conf:ro-dnginx:1.17.104，浏览器访问验证验证源代码参考github参考webpack文档nginx文档
