关于nginx+vue,同域名访问多个不同项目，刷新404问题的解决方法

这个问题困扰了我两天，按照网络上各种方法，试了又试，都不适合我的这种情况。在不懈的努力下，终于找到了解决方法，下面就给大家说说。

首先先介绍下我的项目情况：

同一个域名，通过不同路径  www.xxxx.com，www.xxxx.com/project2，www.xxxx.com/project3的方式来访问到不同项目，也就是我一共是3个项目共用一个域名，其中一个项目是域名直接指向的，不带有其他路径，也就是www.xxxx.com可以直接访问一个项目

现在就来说一下实现方法：

nginx.conf

       location / {
            set $flag 0;
            #获取url完整请求
			set $URL  $host$request_uri;
			if ($URL ~ "/project2/"){
			    set $flag 1;
				root /data/swh/www/project2;
			}
			if ($URL ~ "/project3/"){
			    set $flag 2;
				root /data/swh/www/project3;
			}
			if ($flag = 0){
			    root /data/swh/www/swh_main/;#这里是project1
			}
			index index.html index.htm;
            autoindex on;
        }
        
        location /project2 {
            alias /data/swh/www/project2;
	        index  index.html index.htm;
	        try_files $uri $uri/ /index.html;
	        autoindex on;
        }
        
        location /project3 {
            alias /data/swh/www/project3;
	        index  index.html index.htm;
	        try_files $uri $uri/ /index.html;
	        autoindex on;
        }

下面来说明一下：

首先访问www.xxxx.com/project2,登录成功到首页，一切正常，但发现此时的URL已经变成www.xxxx.com/project2/index，此时点击刷新，就会404，但是按照上图配置就不会再报404了。

因为刷新时 location /project2  这个配置项找不到文件或文件夹，try_files就会发挥作用，$uri就是$root/project2/index，我的项目根目录也就是$root是/data/swh/www，目录中没有这个文件，然后就是$uri/，多了一个 / ，就是找文件夹，$root/project2/index/，显然也没有，最终就会访问try_files的最后一个选项，也就是请求www.xxxx.com/index.html，这是就会触发 location / {} 这个配置项，里面的 if 判断相信大家都能看懂。由于nginx里面不能进行复杂的判断，所以用flag来标记。
 

访问www.xxxx.com/project3，就同理啦！

访问www.xxxx.com，是直接触发location / {} 这个配置项，flag=0，直接访问到项目即可。

好啦，现在就可以快快乐乐的去刷新啦~

哦，对了，补充下vue的配置，用 project2 举例：

vue.config.js 里面的 publicPath

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/project2/" : "/project2/"
}

router/index.js 里面的 base

export default new Router({
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  base: "/project2/",
  routes: constantRoutes
})

就到这里啦，拜拜~