在Ubuntu中搭建Springboot服务器和Vite-vue前端(3)-Vite+Vue

Vite+Vue

• 前言
• 系统和环境
• • 创建Vite-Vue工程
  • 运行Vite-Vue
  • • Windows本地运行
    • 服务器端运行-Nginx代理**
• 小结

前言

根据我的经验，在这里给出一些建议仅供参考：

• Spring Boot和Vite-vue的代码可以不放在服务器上编写，可以在Windows下开发测试，完成的功能可以打包成jar包(springboot)和dist静态资源(vite-vue)放到服务器上运行即可
• 在服务器上Node.js,Nginx,open-jdk,mysql 是必须的，要确保可以正常运行
• 在windows上Node.js是必须的，因为在本地调试Vue项目和打包dist资源需要用到；mysql是必须的，调试springboot中的数据库接口时需要；jdk可以通过InteliJ管理，版本需要和服务器上的一致，避免某些java特性不支持，用于本地运行和打包springboot项目；
• 本地运行的springboot端口和服务器运行的端口路径不同，打包发布前需要进行切换，这是一个忠告

系统和环境

系统平台: Ubuntu20.4 环境： 前端：Node.js,Vite-Vue,Element-plus 后端： Nginx openjdk 17.0.12 2024-07-16 mysql Ver 8.0.39-0ubuntu0.20.04.1 for Linux on x86_64 ((Ubuntu)) SpringBoot(Jar包形式运行)

创建Vite-Vue工程

创建文件夹 D:\\vite-vue_proj 打开power shell终端

cd D:\\vite-vue_proj
#用最新版本的vite以vue为模板创建一个名为my-vue-app的工程
npm init vite@latest my-vue-app — –template vue
#下载过程中可能会因为网络问题失败报错，可以多重试几次

成功初始化Vite-vue工程，目录结构如下

– my-vue-app
* src #源码文件夹
+ assets #资源文件
* vue.svg
+ components #顾名思义，组件
* component.vue
+ App.vue #起始Vue，可以在这里载入components中定义的vue组件，组合成丰富功能的页面
+ main.js #在这里初始化App，配置路由等
+ style.css #控制样式
* public #公共资源文件夹
+ vite.svg
* node_modules #插件模组集合，下载的与工程相关的module都在这里
+ ...some_module
* index.html #起始页，用于加载App.vue，提供基础的静态控件
* package-lock.json
* package.json
* README.md
* vite.config.js #需要对vite进行配置，在此处配置

运行Vite-Vue

Windows本地运行

打开power shell终端

cd D:\\vite-vue_proj\\my-vue-app
npm run dev
#将会出现如下输出
> my-vue-app@0.0.0 dev
> vite
VITE v5.4.8 ready in 852 ms
➜ Local: http://localhost:5173/
➜ Network: use –host to expose
➜ press h + enter to show help

在浏览器地址栏输入http://localhost:5173/ 即可访问正在运行的vue项目，出现如下画面，即为成功

服务器端运行-Nginx代理**

首先在windows端进行打包 打开power shell终端

cd D:\\vite-vue_proj\\my-vue-app
npm run build

my-vue-app文件夹下生成 dist 文件夹，这个就是所有需要的资源都打包在一起了，通过静态服务器运行就可以看到完整的页面。

上传到服务器 通过ftp工具或使用scp将dist文件夹上传到服务器中：

scp -r ./dist ubuntu@IP:/home/ubuntu/vue-proj/

如此，服务器中的路径即是： /home/ubuntu/vue-proj/dist 配置Nginx 将原来的root路径改为dist的路径 sudo vim /etc/nginx/sites-enabled/default

# 这是你部署的ip,即你服务器的Ip，比如111.22.223.44
server_name 127.0.0.1;
#root /var/www/html;
root /home/ubuntu/vue-proj/dist;
location / {
# root html;

try_files $uri $uri/ /index.html;

index index.html index.htm;
}

重新加载nginx sudo nginx -t 测试一下文件编写是否有语法问题，下一步 sudo nginx -s reload nginx将会使用刚刚修改的配置文件重新运行服务 现在在浏览器输入服务器的IP，查看网页是否正常运行。 如有报错，则是上方配置有异常，请检查文件路径，或服务器端口(80和8080端口)是否允许访问。

一般来说腾讯云、阿里云之类的云服务器，在他们的控制台管理页面可以直接调整端口状态；其他的自建服务器，可以通过ufw或firewall-cmd配置系统防火墙，开放端口。

网页成功显示则表示部署成功，后续只要在windows端开发测试OK之后，将新打包的dist替换更新服务器上的dist就可以了，无需再服务器上进行开发。

小结

本节介绍了vite-vue项目的创建和打包，以及在nginx上进行部署。一个完整的网页应该包含可视的前端页面和可用的后端接口，下一节将会介绍用 SpringBooot 完成后端接口开发，以及数据库操作。