[JavaScript知识库]Nginx部署vue项目history的路由模式（非根目录）

vue的路由分为两种hash和history，hash路由虽然不需要做太多的配置但是url地址上会有一个很丑的#号。
而history模式的路由不会有这个#号但是带来的问题却是刷新页面之后会404找不到页面，原因是spa单页面是通过js来进行跳转的。浏览器根据路由地址是找不到服务器上相关的文件的，所以这里需要进行相应的服务器配置。
这里我选用的是nginx服务器。

VUE项目(我的vue-cli版本4.x)

1. vue.config.js

?2. router.js

?3. nginx配置

注：不要被误解，alias指向的路径amap2ui原是dist目录，只不过是修改了目录名称

4.nginx热部署

------ 以上同端口下多个vue项目部署以及vue子路由的访问配置完结！------

root和alias区别

root映射路径：root路径+location路径

alias映射路径：使用alias路径替换location路径，location路径只是该映射配置的别名

alias指定的路径是location的真实路径地址，无论location设置任何内容，资源的?真实路径都是 alias 指定的路径。而root是location的上一层目录名称。
还有一个重要的区别是alias后面必须要用“/”结束，否则会找不到文件的，而root则可有可无。

例:
location /ui/ {
      root /home/amap; # 实际路径root+location，http://域名/ui/sources.js ==> /home/amap/ui/sources.js
}
例:
location /ui/ {
      alias /home/amap; # http://域名/ui/sources.js ==> /home/amap/sources.js
}