nginx单域名配置访问多vue项目（vue3 + vite4）

最新推荐文章于 2024-04-02 16:50:11 发布

钢铁熊猫33

最新推荐文章于 2024-04-02 16:50:11 发布

阅读量525

点赞数 7

分类专栏： vue 前端 nginx 文章标签： nginx vue.js 域名多项目 vite

本文链接：https://blog.csdn.net/qq_40523572/article/details/135155955

版权

前端同时被 3 个专栏收录

17 篇文章 1 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

nginx

6 篇文章 0 订阅

订阅专栏

。。。简单粗暴。。。

vue配置

项目a

vite.config.ts

// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfig => {
  return {
    // 重要: 配置别名
    base: '/a/',
	// 其他配置
  }
}

router/index.ts

// 创建路由实例
const router = createRouter({
  // createWebHashHistory URL带#，createWebHistory URL不带#
  // 重要: 配置别名
  history: createWebHistory('/a/'), 
  strict: true,
  routes: remainingRouter as RouteRecordRaw[],
  scrollBehavior: () => ({ left: 0, top: 0 })
})

项目b

vite.config.ts

// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfig => {
  return {
    // 重要: 配置别名
    base: '/b/',
	// 其他配置
  }
}

router/index.ts

// 创建路由实例
const router = createRouter({
  // createWebHashHistory URL带#，createWebHistory URL不带#
  // 重要: 配置别名
  history: createWebHistory('/b/'), 
  strict: true,
  routes: remainingRouter as RouteRecordRaw[],
  scrollBehavior: () => ({ left: 0, top: 0 })
})

然后项目打包

。。。。。。

nginx配置

html接口

html/a
html/b

conf配置

server {
        listen       8090;
        listen       [::]:8090;
        server_name  www.abc.com;
        charset utf-8;

        # 访问 xx.xx.xx.com/bb, bb=vue项目的别名, nginx中的文件夹也是bb

        location / { ## 前端项目
                root   /usr/local/nginx/html;
                index  index.html index.htm;
        }

        location ^~/a/ {
                alias  /usr/local/nginx/html/a/;
                index  index.html index.htm;
                try_files $uri $uri/ /a/index.html;
        }

        location ^~/b/ {
                alias  /usr/local/nginx/html/b/;
                index  index.html index.htm;
                try_files $uri $uri/ /b/index.html;
        }

        error_page 404 /404.html;

        location = /40x.html {

        }

        error_page 500 502 503 504 /50x.html;

        location = /50x.html {

        }
}