Nginx同域名同端口部署两个项目

原创已于 2024-03-21 09:35:20 修改 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #前端

于 2023-07-26 13:43:02 首次发布

文章讲述了如何修改Vue项目的配置，包括在router/index.js中设置base路径为/h5/，在vue.config.js中处理publicPath，以便于生产环境中部署。同时，详细说明了Nginx的配置过程，区分h5和web项目，确保正确路由到对应的项目目录，并处理错误页面。

1.前端修改部分,修改H5项目

1).在router/index.js 添加base: "/h5/"

const router = new VueRouter({
    mode: 'history',
    base: "/h5/",
    routes
})

2).在vue.config.js添加如下代码

没有这个文件的话在根目录下创建

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/h5" : "/",
}

2.配置nginx

1).在conf / ngin.conf 文件配置

   server {
        listen       80;
        server_name  localhost;

        // 访问h5项目
        location /h5/ {
            root   html;
             try_files $uri $uri/ /h5/index.html;
            index  index.html;
        }
        // 访问web项目
        location / {
            root   html/web;
            try_files $uri $uri/ /index.html;
            index  index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

  
    }