同一域名下Nginx 配置多个vue 项目访问

Nginx如何部署多个vue项目

1.第一步 去修改 vue 配置

• router/index.js

export default new Router({
  base : '/admin/',  这快是需要修改的
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

• vue.config.js

module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.aa.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，		如果你的应用被部署在 https://www.aa.vip/admin/，则设置 baseUrl 为 /admin/。
  publicPath: process.env.NODE_ENV === "production" ? "" : "/admin/",
    //publicPath 的路径要个 router里的base 一致
 
}

2.Nginx配置

首先在Nginx的html 里面新建文件夹

文件夹名称可以 和 vue base 一致

把vue 打的dist 文件下的 所有文件复制到 这个目录下

编辑nginx.conf 配置路径

  location / { #  这个是默认路径
            root  /home/nginx/nginx-1.9.9/html;
			try_files $uri $uri/ /index.html;
			 
            index  index.html index.htm;
          #rewrite ^(.*) https://$server_name$1 permanent;
      #proxy_redirect http:// https://;
        }
	

location /warehouse { # 这个是第二个目录的 配置
           alias /home/nginx/nginx-1.9.9/html/admin;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
        }
        
        location /warehouse { 
           alias /home/nginx/nginx-1.9.9/html/admin;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
        }
      

访问路径 ：

https://www.aa.vip 对应nginx 的第一个配置

https://www.aa.vip/admin 对应nginx 的第二个配置

如若多个项目

重复 vue 操作，nginx的配置的修改

此方法只适用 同一域名下 配置多个vue 项目访问