nginx alias与root,vue多路由简洁配置

一、nginx 可以通过alias和root设置虚拟目录,但两者的效果是不同的 alias指定的目录是准确的,location下访问是在设置的alias目录下查找,而root则需要先匹配上一级目录 alias 后的目录必须带 /,而root则不需要,访问时root会自动加上/

例子

location /gov/ {
    alias /root/www/gov/;
}

地址:http//www.test.com/gov/test.html
访问目录:/root/www/gov/test.html
location /gov/ {
    root /root/www/gov;
}
地址:http//www.test.com/gov/test.html
访问目录:/root/www/gov/gov
二、当很多项目使用一个域名时,前端vue路由是需要指定到index.html的,估可以利用alias配置简洁的nginx(可配置的方法有好几种,这里只介绍个人认为比较简洁的方法)
有两个vue项目分别是:
/www/wwwroot/A   // 匹配关键字:a
/www/wwwroot/B   // 匹配关键字:b
错误的配置:
location /a {
	    root /www/wwwroot/A;
	    index  index.html index.htm;
		try_files $uri $uri/ /index.html;
}
location /b {
	    root  /www/wwwroot/B;
	    index  index.html index.htm;
		try_files $uri $uri/ /index.html;
}

这样配置能访问的到,但是在第二个页面刷新就会404
利用alias配置
location /a {
	    alias /www/wwwroot/A/;
	    index  index.html index.htm;
		try_files $uri $uri/ /a/index.html;
}
location /b {
	    alias  /www/wwwroot/B/;
	    index  index.html index.htm;
		try_files $uri $uri/ /b/index.html;
}

需要注意两个地方: 
alias /www/wwwroot/A/; // 指定目录
try_files $uri $uri/ /a/index.html; // 找不到文件时转发到index.html

你可能感兴趣的:(基础知识,nginx,vue.js,前端)