同一台Nginx下面部署多个Vue工程

亚林瓜子

已于 2024-09-26 15:32:21 修改

阅读量944

点赞数 3

CC 4.0 BY-SA版权

文章标签： nginx vue.js 运维

于 2020-09-26 15:15:58 首次发布

阿弥陀佛欢迎流通功德无量

本文链接：https://blog.csdn.net/fxtxz2/article/details/108812170

本文介绍如何在Nginx服务器下部署多个Vue.js项目，并实现不同项目的路径访问。通过配置Vue项目的publicPath和VueRouter的base路径，以及设置Nginx的location规则，可以轻松实现多Vue应用的共存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

需要在同一个nginx下面部署多个vue静态问题。目的达到如下的访问方式：

# 访问vue1工程
http://127.0.0.1/vue1
# 访问vue2工程
http://127.0.0.1/vue2

解决

vue

publicPath

vue这边主要就是配置publicPath参数：

# 对于项目1而言，修改vue.config.js文件的publicPath：
publicPath: '/vue1/'
# 对于项目2而言，修改vue.config.js文件的publicPath：
publicPath: '/vue2/'

如果修改publicPath影响到Vue Router，则需要进一步配置Vue Router的base路径。具体可以参考https://router.vuejs.org/zh/api/#mode

Router base

createWebHistory() // 没有 base，应用托管在域名 `https://example.com` 的根目录下。
createWebHistory('/vue1/') // 给出的网址为 `https://example.com/vue1/`
createWebHistory('/vue2/') // 给出的网址为 `https://example.com/vue2/`

nginx

配好后，然后分别打两个vue包，将文件复制到nginx的html文件下面，这样后，html有如下结构：

# nginx根目录
.
html
 |-vue1
 |-vue2

location /vue1 {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /vue1/index.html;
}

location /vue2 {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /vue2/index.html;
}