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

忘是亡心i 2023-06-25 08:12 28阅读 0赞

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

## vue配置 ##

### 配置[vue.config.js][]的**outputDir**和**publicPath** ###

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

![outputDir][]  
![publicPath][]

### 配置[Vue Router][]的**base** ###

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

![base][]

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

[vue.config.js]: https://cli.vuejs.org/zh/config/#publicpath
[outputDir]: https://img-blog.csdnimg.cn/20191227204821837.PNG
[publicPath]: https://img-blog.csdnimg.cn/2019122720485713.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzZWhz,size_16,color_FFFFFF,t_70
[Vue Router]: https://router.vuejs.org/zh/api/#base
[base]: https://img-blog.csdnimg.cn/20191227205740103.PNG