Vue3项目二级目录部署

发布：2023/10/17 22:43:25作者：管理员来源：本站浏览次数：546

文章目录

需求描述

具体配置

参考链接

需求描述

有时候需要在同一域名或同一端口下，部署多个前端项目，这时候只有一个根目录就不能满足需求了，需要配置二级目录。除了在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.html

routes

})

进行上述修改后，执行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;

}

参考链接

Vue 3使用二级目录部署(Nginx)

最近通过Vue3写了个Web展示项目，部署的时候不希望再弄个新域名或者二级域名，想到的使用二级目录。

最初按照正常的Vue发布来部署，Nginx配置如下

location ^~/web{

alias /data/web;

try_files $uri $uri/ /web/index.html;

index index.html;

}

通过"域名/web"访问，返回500。

后来再网上查询，大部分说需要

配置vue.config.js中的publicPath

配置route中的mode和base；

通过尝试，发现Vue3中，RouterOptions设置mode已经更新为createWebHistory，base已经变为createWebHistory的参数；

最终成功方案：

Nginx 配置不变

Vue项目中vue.config.js 配置如下：

module.exports = {

publicPath: process.env.NODE_ENV === 'production' ? '/web/' : '/'

}

Vue项目中route关键配置如下：

createRouter({

history: createWebHistory('/web/'),

routes: [ ***路由列表***]

})

通过域名+/web 访问，可以正常显示。以上亲测有效，如有其他问题欢迎在评论去交流。

　Element plus 在vite2 和vue3时build打包失败

Android无法实现发送短信功能的问题　

Java Web项目在集群中部署并实现负载均衡 IIS部署vue项目刷新404问题 SSM项目目录结构需要先部署项目 .Android，然后才能启动它。 Vue3项目二级目录部署 Vue3 项目中使用setup()函数报错，script setup cannot contain ES module exports 将ASP.NET Core Web API项目部署到Docker容器 Net Core 微服务 - 基于Windows 10 的Docker+Jenkins实现自动化部署.Net Core Web Api 项目 VUE 项目单独部署在IIS的时候WebConfig配置方法使用nginx部署Vue项目，刷新出现404

柏港建站平台

柏港 Vue

柏港为您推荐了一些相关资讯