同一个域名使用多个location来部署vue项目

原创已于 2025-04-21 14:54:09 修改 · 950 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2019-12-18 17:41:23 首次发布

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何解决在nginx中为Vue3.0项目配置多个location路径时遇到的资源请求路径错误问题。当仅修改nginx配置无法正常访问时，需要在vue.config.js中设置base路径，并在src/router.js中相应调整，确保前端路由与nginx配置匹配，从而正确加载资源。

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

普通的静态页面直接在nginx端使用location上配置路径就可以了，但是vue项目不但需要再nginx上的location配置访问路径，vue项目代码里面的路由跳转也需要配置相对应的路径
（前端项目使用的是VUE 3.0）

eg:
这边正常放置一个vue项目
nginx的配置如下：
在这里插入图片描述
访问：

页面正常访问

仅仅修改nginx的配置：
在这里插入图片描述
正常来说这样配置访问到的资源和之前来说是一样的。
访问：

这是访问不到了，查看资源请求路径，发现资源请求路径是错误的，正确的路径应当是/yuetian/assets/js/app.6a8b4a7f.js 而这里是/assets/js/app.6a8b4a7f.js

这里资源请求都没有加上/yuetian 这层目录，因为vue里里面的资源请求路径也需要在代码里面配置
1.修改vue.config.js 这个文件
在这里插入图片描述
2.修改 src/router.js 这个文件
添加一行： base: ‘/yuetian’,
（这里的base 路径相当于 routes 下面path 的 “/” 路径）

此时nginx端的配置：

访问：