Nginx一个Server代理多个Vue项目

Nginx一个Server代理多个Vue项目

一、配置Vue项目

• 配置vue.config.js的outputDir和publicPath属性

在vue项目的根目录下找到vue.config.js配置文件，打开找到如下代码并修改outputDir和publicPath属性的值。如下代码参考：

module.exports = {
    outputDir: 'console',        // 打包输出的目录名称
    publicPath: '/console',        //index.html文件  资源的引用路径前缀
    // …… 其他配置省略
}

输入如下图：

• 配置Vue Router的base属性

在vue项目的src目录下找到router.js文件，打开找到如下代码并修改base属性，如果没有此属性可以手动添加。如下代码参考：

const router = new Router({
  mode: 'history',               // 路由模型
  base: '/console/',            // 配置了这个属性后，nginx才能匹配到使用”console“的请求
  routes: constantRouter    // 自定义动态路由配置
})

输入如下图：

二、配置Nginx

在服务器上找到nginx的安装路径（如：/usr/local/nginx)并使用vi命令打开config目录下的nginx.cnf文件，找到需要配置的server进行配置。如下代码参考：

• 使用root配置vue文件路径

location /cdmt {
    root /usr/local/src/cdmt/dist/cdmt;
    index index.html;
    try_files $uri $uri/ @router;
}

location @router {
    rewrite ^.*$ /cdmt/index.html last;
}

location /console {
    # try_files $uri $uri/ @router;
    root /usr/local/src/cdmt/dist;
    index index.html;
    try_files $uri $uri/ @routeConsole;
}

location @routerConsole {
    rewrite ^.*$ /console/index.html last;
}

• 使用alias配置vue文件路径

location /cdmt {
    alias /usr/local/src/cdmt/dist/cdmt;
    index index.html;
    try_files $uri $uri/ @router;
}

location @router {
    rewrite ^.*$ /cdmt/index.html last;
}

location /console {
    alias /usr/local/src/cdmt/dist/console;
    index index.html;
    try_files $uri $uri/ @routeConsole;
}

location @routerConsole {
    rewrite ^.*$ /console/index.html last;
}

• 重启Nginx

#> systemctl restart nginx

三、验证配置

打开浏览器访问console在浏览器地址栏中输入：http://127.0.0.1:9001/console能看到vue的登录界面，说明配置成功，否则请自查原因并解决。