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
}