nginx-一个server代理多个vue项目

一个server代理多个vue项目需要同时配置vue和nginx。

vue配置

配置vue.config.js的outputDirpublicPath

module.exports = {
    outputDir: 'quilt',		//打包目录,后面会上传到服务器
    publicPath: '/quilt',		//index.html文件  资源的引用路径前缀
}

nginx-一个server代理多个vue项目_第1张图片
nginx-一个server代理多个vue项目_第2张图片

配置Vue Router的base

const router = new VueRouter({
    mode: 'history',
    base: '/quilt/',		//配置应用的基路径,配置了这个基路径后面nginx才能匹配请求
    routes
})

nginx-一个server代理多个vue项目_第3张图片

nginx配置

假设/home/dist目录下有三个vue项目:quilt, website, device

使用root配置

    server {
        listen       80;
        server_name  localhost;
		location /quilt {
            root /home/dist;
            index index.html;
            try_files $uri $uri/ /quilt/index.html;
		}
		location /website {
            root /home/dist;
            index index.html;
            try_files $uri $uri/ /website/index.html;
		}
		location /device {
            root /home/dist;
            index index.html;
            try_files $uri $uri/ /device/index.html;
		}
}

使用alias配置

    server {
        listen       80;
        server_name  localhost;
		location /quilt {
            alias /home/dist/quilt;
            index index.html;
            try_files $uri $uri/ /quilt/index.html;
		}
		location /website {
            alias /home/dist/website;
            index index.html;
            try_files $uri $uri/ /website/index.html;
		}
		location /device {
            alias /home/dist/device;
            index index.html;
            try_files $uri $uri/ /device/index.html;
		}
}

两者的区别是使用root时,root拼接请求的全路径,而使用alias时,alias替换用于匹配的路径(指/quilt, /website, /device,不是全路径)。假设请求的路径/quilt/abc.png,root拼接就是(/home/dist)/quilt/abc.png,alias替换就是(/home/dist/quilt)/abc.png。最终的结果是得到正确的文件路径,只有正确的文件路径才能被成功代理。

你可能感兴趣的:(运维)