前后端分离+Nginx+VUE路由实现访问路径加前缀

        近期需要对一个VUE项目进行改造。项目需求是需要在访问路径上添加一个前缀。由于之前没有实现过类似的需求。所以在进行的时候，通过网上寻找的方法一一尝试后，耗费了大量的时间才实现了该需求。故写下这篇博客记录一下。

一 项目背景

简单介绍一下本次改造的项目情况。该项目的默认部署方式是前后端都部署在一个容器内。项目结构为通过vue.config.js中module.exports的pages构建了多页应用，由于多页应用有多个入口，所以无法直接配置总路由的base属性来添加前缀。

二项目解决过程

对项目初步了解之后，首先需要确定解决思路，本次采用的解决思路是先进行前后端分离部署，再通过nginx转发静态资源，实现多页应用前端的添加，使用VUE路由的base属性来添加前缀，最后把项目中所有使用了window.location.href的地方都加上前缀。

1 前后端分离部署

由于项目采用容器化的部署方式。所以可以通过修改Dockerfile更改项目打包的方式，原来的项目Dockerfile中是通过COPY命令把vue打包后的静态资源都拷贝到镜像中。所以这次需要把原来的Dockerfile进行拆分处理，首先把COPY静态文件的相关命令注释，打出后端的镜像，然后再写一个前端使用的Dockerfile(设置nginx镜像，COPY静态文件到nginx的html文件夹下，COPY项目配置好nginx的default.conf到镜像中)，打出前端的镜像，其实就是通过nginx实现了前后端分离。

2 nginx转发静态资源

转发静态资源的实现就需要通过配置default.conf来实现。相关的关键配置如下：

    location / {
        # root 根目录，默认nginx镜像的html文件夹，可以指定其他
        root   /usr/share/nginx/html;
        # 如果vue-router使用的是history模式，需要设置这个
        try_files $uri $uri/ /index.html;
        index  index.html;
    }


    location ~* ^/(#) {
       rewrite ^/#/(.*)$ /$1 break;
    }

    location /dist/login {
        # root 根目录，默认nginx镜像的html文件夹，可以指定其他
        root   /usr/share/nginx/html;
        # 如果vue-router使用的是history模式，需要设置这个
        try_files $uri $uri/ /login.html;
        index login.html;
    }

通过这样配置，/dist/login就可以成功访问login这个页面了。这样就实现了vue多页面的前缀添加。然后登录进去的主界面，都会通过vue主路由，这时候就可以通过配置总路由的base属性来添加前缀。最后只需要全文搜索window.location.href，把相关的url都加上前缀即可。