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

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

vue配置

配置vue.config.js的outputDir和publicPath

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

配置Vue Router的base

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

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。最终的结果是得到正确的文件路径，只有正确的文件路径才能被成功代理。