Vue3项目二级目录部署

文章目录

需求描述
具体配置
参考链接

需求描述

有时候需要在同一域名或同一端口下，部署多个前端项目，这时候只有一个根目录就不能满足需求了，需要配置二级目录。除了在Nginx配置文件中配置二级目录外，另外还需要在Vue项目中添加一些配置。

具体配置

.env.production

# VITE_BASE_URL=/ # 默认配置
VITE_BASE_URL=/gis/  # 二级目录部署时用到

routes.ts

export const router = createRouter({// history: createWebHistory(), // 默认配置history: createWebHistory("/gis/"), // 二级目录部署时用到，https://www.dianjilingqu.com/365908.htmlroutes
})

进行上述修改后，执行npm run build会发现生成的dist文件夹下第一级目录是上面配的路径，也就是gis。

nginx.conf

        location /gis {alias   D:/Code/smartcity-web/dist/gis/;try_files $uri $uri/ /hmanage/index.html;index  index.html index.htm;}

参考链接

Vue3项目二级目录部署相关推荐

Nginx 二级目录部署Vue2
Nginx 二级目录部署Vue2 nginx 服务器上 /xxxxx 是二级目录是对访问路径匹配 location /xxxx {root /public/app/dist;index index.p ...
Vue二级目录部署多环境打包部署（二）
如果是Vue-cli2的可以看我的上一篇文章:Vue二级目录部署&多环境打包部署(一) 我们的域名一般都是www.xxx.com,可是我们想实现www.xxx.com/aaa 或者 www.x ...
二级目录部署springboot项目
一. 环境需要在二级目录下部署springboot项目,如在 http://www.abc.com/aaa 部署项目A,在http://www.abc.com/bbb 部署项目B. 二.Nginx配 ...
vue项目nginx部署子目录_vue 多项目部署---二级目录
新项目:同一域名下部署多个vue项目, 根目录vue项目不需要按下面的方式进行打包部署 https://www.bitedit.com/ 下面三个项目以二级目录部署 https://www.bited ...
Nginx项目部署：新域名、二级目录、不同端口
Vue项目打包以及单域名部署:https://blog.csdn.net/geidongdong/article/details/122305841 简单介绍如何使用二级目录部署新项目进入你ngin ...
vue3项目目录结构
一.vue3项目的目录结构详解 node_modules:通过 npm install 下载安装的项目依赖包 public:存放静态资源公共资源,不会被压缩合并 -3DModel:存放.glb3D模型 ...
Vue3项目搭建全过程
目录一.前言二.搭建准备三.搭建项目四.启动项目一.前言在2020年的9月19日,万众期待的Vue3终于发布了正式版,命名为"One Piece". 它也带来了很多新的 ...
vue2.0 vue3.0 打包二级项目-如何部署二级目录
看了很多其他大佬的文章,我这边做了一个笔记记录了一下vue打包二级目录的方法我们想要的效果是什么我们想www.taobao.com/web二级目录来访问我们的页面如果我们没有做任何的配置,直接将 ...
vue项目部署在二级目录下
一般情况下,前端项目部署在各自端口根目录下.但是如果服务器端口限制等因素,多个项目共享一个端口,就需要部署在二级目录下. 但是会面临几个问题服务器配置前端静态资源路径配置前端请求路径写法前端路 ...