nginx 同时部署多个vue项目

最新推荐文章于 2024-08-02 15:55:29 发布
最新推荐文章于 2024-08-02 15:55:29 发布
阅读量916 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yijianqingyu/article/details/105221686
版权

背景：新项目前端部分包含pc端管理页面和weixin端页面
 

正确配置：

第一次尝试：给项目加上子路径名称

两个项目路径分别为127.0.0.1:8080/pc和127.0.0.1/weixin

直接访问http://127.0.0.1:8080/pc/可以跳转，但是访问http://127.0.0.1:8080/pc/home不行

也就是说，用户第一次输入http://127.0.0.1:8080/pc/进来以后，页面地址会变成http://127.0.0.1:8080/pc/home(默认home页)，这时点击刷新就会进入nginx页面。

第二次尝试：因为原先只有一个pc端的时候，没有二级路径，刷新是没有问题的。我把pc的二级路径取消了。

这时页面可以访问，刷新也可以访问，但是访问weixin页面会匹配到/进入pc端页面

 

一剑轻语
关注
专栏目录
Nginx部署两个vue项目
peter__xu的博客
07-09 4728
公司要求一个URL下连接两个项目，查阅了半天了解到nginx，研究了研究终于搞定了，记录一下过程，方便以后温习。线上nginx搭建是后台写的，开发环境是前端（也就是我）写的，所以文章是以前端角度描述的。首先主域名是www.url.com，要绑定的子域名是www.url.com/two（two是第二个项目的名字）第一个项目默认为根url，'/' 就自动选择第一个项目，第二个项目为 '/two' ， url输入www.url.com/自动选择第一个项目，url输入www.url.com/two自动选择第二个项目
nginx部署多个vue项目的2种方法
热门推荐
光英的记忆博客
07-06 2万+
第一种 同一个域名或者ip 相同端口号 部署多个项目 通过斜线访问 http://10.16.xx.23/student/ http://10.16.xx.23 先看这2种配置 查找nginx 和配置文件 whereis nginx 查看配置文件 vim nginx.conf user nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/ngin.
nginx路径跳转 访问不同vue项目
weixin_43090627的博客
06-02 2676
现已搭建两个vue项目分别为项目A和项目B； 两个项目的ip地址是： http://192.168.1.1:10123; http://192.168.1.1:10124; 想在一个域名中通过路径修改实现不同项目的跳转；例如输入/foo/ 对应第一个项目，/bar/对应第二个项目。 nginx配置如下： server { listen 9000; server_name localhost; location /foo/ { proxy_
nginx.conf配置示例：使用nginx部署多个vue前端项目的三种配置方式
最新发布
学亮编程手记
08-02 501
常见3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法。
nginx同时部署多个vue项目
gzhang1018的博客
07-02 2024
nginx.conf代码如下： #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_
同域名下两个vue项目互相跳转
wanshiwusanren的博客
06-11 2910
下载nginx，下载后找到conf里的nginx.conf文件，拖到编辑工具中 然后更改对应的端口号 然后把打包好的两个项目放到html文件夹中（只放dist文件夹中的内容即可） 配置好后，然后双击nginx.exe启动服务 打开网站：直接再浏览器输入localhost:8080/map或者localhost:8080/houtai即可 然后再需要跳转的地方直接跳转就行 window.location.href = "http://localhost:8080/houtai/#/home" ..
一个nginx同时部署多个vue项目，访问不同的路径打开不同的项目
weixin_44479071的博客
03-16 2533
vue项目打包 注意： 通过 www.xxx.com/sysweb访问的项目需要配置vue.config.js const webpack = require("webpack"); module.exports = { publicPath:"/sysweb/", }; nginx配置 server { listen 80; server_name www.xxx.com; #第一个项目 访问方式 www.xxx.com
Nginx-部署2个vue项目（多个项目）-二级域名设置代理
路虽远行则将至，事虽难做则必成。
05-16 3459
最近在实际开发过程中，需要在服务器部署2个项目。需要nginx二级域名。开始时候在网上查了一圈，各有说法，不是很全，很头大。这里把自己成功的二级域名代理记录一下。网上有很多文章说要该router.js文件，要该vue.config.js中的publicPath的路径问题。不用这么麻烦。很多文章都是说在nginx配置2个server就行了，但其实你不在域名哪里解析的话是访问不到的（重点）。
nginx部署多个vue项目的方法示例
10-14
在本文中，我们将深入探讨如何使用Nginx部署多个Vue.js项目。这通常在需要在同一域名下运行多个独立的应用程序时变得必要。我们将通过一个具体的示例来展示配置过程。 首先，我们的目标是在同一个域名下部署两个Vue...
在nginx上部署vue项目(history模式)的方法
08-28
在部署Vue项目到Nginx时，先通过`npm run build`命令打包应用，生成的静态文件应被放置在Nginx的相应目录下，如`/var/www/html/bank/page`。 总结来说，部署Vue项目并启用`history`模式需要在服务器端进行适当的...
nginx 部署两个vue项目遇到的问题
pillowc的博客
09-01 265
第四步：在docker映射的html目录中创建`ruoyi`文件夹，将打包好的项目复制到此，在`nginx.conf`中增加配置信息如下，这里的root末尾就不需要加上项目名`ruoyi`，因为第三步已经配置了全局前缀，这里所有的访问都是已经加上了`/ruoyi/`前缀， try_files这里最后的Index.html需要加上项目名/ruoyi/，否则页面刷新后就找不到主页或者显示404。这两天在学习使用docker部署的时候，第一次接触到nginx，遇到很多问题，今天折腾好一会才解决，记录一下。
Vue+Nginx实现同域名下部署多个vue项目
怎么办我好菜啊
09-02 2082
vue+nginx实现同域名多项目
nginx 配置多个vue，环境部署
lddzyh的博客
01-01 2926
1、最近项目要上线，需要通过nginx作为代理，要发布2个VUE前端项目，记录一下nginx.conf配置文件,
Nginx 部署多个vue项目
zyyy930的专栏
03-31 540
nginx 下部署多个vue项目。
nginx同一域名部署多个vue项目_MQ
weixin_42588676的博客
01-16 2955
nginx同一域名部署多个vue项目_MQ 1、第一个项目正常打包部署，第二个及以上的项目需要设置项目访问路径（请求路径） 第一个正常打包即可 访问时只需要输入域名 ：www.xxx.com; 第二个项目访问路径为：www.xxx.com/bi; 2、项目添加前缀 （1）配置文件添加 （2）路由添加 （3）打包好后index.html页面添加 <meta base=/bi/> <meta base=你的前缀> 3、打包部署 4、nginx配置 server {
nginx中部署多vue项目(亲自踩坑)
WF帆少的博客
11-01 4927
注：博主用的是vue-cli3搭建的vue项目，在nginx中用一个端口配置不同的url， 分别通过127.0.0.1/comfessionWall和127.0.0.1/office访问 修改vue.config.js 在第一个vue项目的vue.config.js添加publicPath: '/comfessionWall' module.exports = { //部署应用包...
nginx部署多个前端vue项目，有3种方式
LuoJun的博客
11-12 2572
域名配置 端口配置 location配置 首先我们看一下nginx.conf配置文件 为了方便管理，在/usr/local/nginx/conf.d/ 创建自己的*.conf配置文件。没有conf.d目录，直接mkdir 创建conf.d *.conf 详细可参考： server { listen 80; server_name 192.168.5.110; #项目域名 root /z/workspace/builduis/web-a/dist; #.
nginx部署vue项目（包括一个nginx部署多个vue项目）
guoyp2126的博客
09-17 9450
在nginx部署vue项目，含同一端口号下，配置多个vue项目
nginx部署多个前端项目
weixin_42333548的博客
07-28 1万+
nginx部署多个前端项目
nginx docker部署多个vue项目
09-02
您可以使用 Docker 和 Nginx 部署多个 Vue 项目。下面是一种可能的方法： 1. 创建 Docker 镜像：为每个 Vue 项目创建一个 Docker 镜像。您可以在每个项目的根目录中创建 Dockerfile 文件，并指定项目的构建和运行步骤。以下是一个示例 Dockerfile： ```Dockerfile # 定义基础镜像 FROM node:14 as build # 设置工作目录 WORKDIR /app # 拷贝 package.json 和 package-lock.json 文件 COPY package*.json ./ # 安装依赖 RUN npm install # 拷贝项目文件 COPY . . # 构建项目 RUN npm run build # 定义 Nginx 镜像 FROM nginx:1.19 # 删除默认配置文件 RUN rm /etc/nginx/conf.d/default.conf # 将自定义 Nginx 配置文件复制到容器中 COPY nginx.conf /etc/nginx/conf.d/ # 将构建好的 Vue 项目复制到 Nginx 的静态文件目录中 COPY --from=build /app/dist /usr/share/nginx/html # 暴露 Nginx 默认端口 EXPOSE 80 # 启动 Nginx 服务 CMD ["nginx", "-g", "daemon off;"] ``` 请确保在每个项目的根目录中创建相应的 nginx.conf 配置文件，以正确配置 Nginx。以下是一个示例配置文件： ```nginx server { listen 80; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 2. 构建 Docker 镜像：对于每个项目，使用以下命令在项目根目录中构建 Docker 镜像（假设 Dockerfile 和 nginx.conf 配置文件已准备好）： ```bash docker build -t project1 . ``` 3. 运行 Docker 容器：使用以下命令在不同的端口上运行每个项目的 Docker 容器（示例中使用端口号 8081 和 8082）： ```bash docker run -d -p 8081:80 project1 docker run -d -p 8082:80 project2 ``` 现在，您应该可以通过访问相应的端口号来访问每个项目。例如，通过访问 `http://localhost:8081` 来访问第一个项目，通过访问 `http://localhost:8082` 来访问第二个项目。 注意：如果您的项目需要处理后端 API 请求，您可能需要在 Nginx 配置文件中添加适当的代理规则。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值