在Nginx 上部署 Vue3 项目涉及几个关键步骤,包括构建 Vue3 项目、安装并配置 Nginx 服务器、将 Vue3 项目打包成静态文件、配置 Nginx 以托管这些静态文件,以及测试部署结果。下面是详细的步骤: 1. 构建 Vue3 项目 首先,确保你已经使用 Vue CLI 创建了一个 Vue3 项目。如果还没有,可以通过以下命令创建: bash...
1.创建3个vue项目 项目1:vue-demo-main 子项目1:vue-sub-demo-one 子项目2:vue-sub-demo-two pnpm create vite vue-demo-main --template vue pnpm create vite vue-sub-demo-one --template vue pnpm create vite vue-sub-demo-two --template vue 2.在每个项目中都引入vue-router pnpm add vue-rout...
(1)首先是一个Vue项目。 (2)其次准备好服务器(在这里我是用虚拟机VMware)。 (3)准备好一个SpringBoot后端代码。 (4)服务器上必须安装Nginx。 1、前端代码注意事项: (1)在这里我是用vuecli3脚手架创建的vue项目的,所以项目创建完毕之后是没有vue.config.js的。 其实这个文件的创建是为了本地测试解决前后端...
# 1)本地项目打包,前往luffycity项目目录下 >: cnpm run build # 2)上传 >: scp -r dist root@39.100.242.149:~ # 3)移动并重命名 mv ~/dist /home/html # 4)去向Nginx配置目录,备份配置,完全更新配置:填入下方内容 >: cd /usr/local/nginx/conf >: cp nginx.conf nginx.conf.bak >: vim nginx...
start nginx 不报错说明启动成功,如图: 在浏览器输入localhost,显示如下页面说明能够正常启动: 二、同一个nginx部署多个项目 视频地址:https://www.bilibili.com/video/BV1fG4y1a7Sv/?spm_id_from=333.337.search-card.all.click&vd_source=5f425e0074a7f92921f53ab87712357b ...
我们在将vue项目部署到nginx上时,经常会遇到同一个端口部署多个不同项目的需求,具体来说,需求如下: 比如:服务器的ip地址为:192.168.100.100 申请的端口为:8000 需要实现: 项目1访问地址为:http://192.168.100.100:8000/project1 项目2访问地址为:http://192.168.100.100:8000/project2 ...
docker使用nginx镜像部署vue3项目 1、打包 2、上传到服务器并解压(我已经解压) 3、修改nginx.conf配置文件 4、部署 代码语言:docker 复制 docker run -d \ --name vue-nginx \ -p 8091:80 \ -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf:ro \...
Nginx作为高性能的HTTP和反向代理服务器,常用于负载均衡和静态资源服务。本文将结合这些技术,介绍如何协同部署Vue3与SpringBoot项目。 一、准备工作 安装Docker:确保你的服务器或本地环境已经安装了Docker,并可以正常运行。 准备Vue3和SpringBoot项目:确保你的Vue3前端项目和SpringBoot后端项目已经开发完成,并能够独立运行...
可以使用键盘方向键选择 Vue 版本,这里使用默认 Vue3,回车开始创建项目。 🎉 Successfully created project hello-world. 👉 Get started with the following commands:$cdhello-world$npm run serve 出现如上信息,表示项目创建成功。 hello-world 是项目名称,会使用该名称生成相应的项目文件夹,内部包含多个项目文件...
http://doc.ruoyi.vip/ruoyi-vue/document/hjbs.html#nginx%E9%85%8D%E7%BD%AE ——— 进入前端项目的主目录,然后执行: npm run build:prod 1 执行完后会在dist目录生成相关的打包好的文件。 把打包好的文件上传到服务器,我部署的位置是:/home/ruoyi/projects/ruoyi-ui localhost:/home/ruoyi/projects/...