将main.js的本地base_url注释，切换服务器IP的base_url，然后

npmrun build

生成dist文件夹，上传到服务器之前保存的位置即可，不需要操作nginx。
浏览器地址栏输入http:/IP/frontend/main查看效果。

axios

进入到之前创建的（本地windows）my-vue-app目录下，打开终端
安装axios，之后访问后端接口需要用到

npminstallaxios 

element-plus

进入到之前创建的（本地windows）my-vue-app目录下，打开终端
安装element-plus组件

npminstallelement-plus --save

新建components/MainPage.vue

<scriptsetup>import{ref }from'vue'import{ElMessageBox }from'element-plus'constTitle =ref('Demo')constitems =ref([{index:0,info:{id:'001',name:'user1',password:'',role:1,description:'desc',usable:1}},])constshowPasswordColumn =ref(false)//隐藏密码列constcheck_name =ref('')constcheck_name_is_usable =ref('')constbase_url =inject('base_url')consthttp =axios.create({baseURL:base_url,timeout:5000,headers:{'Content-Type':'multipart/form-data'}})functiongetAccontList(){http.post('/backend/main/getAccountList').then(function(response){// console.log(response.data)items.value =[]leti =items.value.length;if(response.data.code ==1){response.data.data.forEach(element=>{items.value.push({index:++i,info:element })});}else{ElMessageBox.alert(response.data.msg,'提示',{confirmButtonText:'确定',type:'warning',})}})}functionisAccountEnable(){if(check_name.value ==''){check_name_is_usable.value =''ElMessageBox.alert('请先输入用户名','提示',{confirmButtonText:'确定',type:'warning',})return}http.post('/backend/main/isAccountEnable',{name:check_name.value }).then(function(response){// console.log(response.data)if(response.data.code ==1){if(response.data.data ==1){check_name_is_usable.value ='用户名可用'}else{check_name_is_usable.value ='用户名不可用 或 不存在'}}else{ElMessageBox.alert(response.data.msg,'提示',{confirmButtonText:'确定',type:'warning',})}})}</script><template><el-cardstyle="min-width:300px":title="Title"shadow="always"><template#header>{{ Title}}</template><el-buttontype="primary"plain@click="getAccontList">刷新</el-button><el-table:data="items"stripefitstyle="width:100%;height:270px;"><el-table-columnprop="index"label="序号"min-width="80px"v-if="false"></el-table-column><el-table-columnfixedprop="info.id"label="uid"min-width="70px"></el-table-column><el-table-columnprop="info.name"label="用户名"min-width="100px"></el-table-column><el-table-columnprop="info.password"v-if="showPasswordColumn"label="密码"min-width="150px"></el-table-column><el-table-columnprop="info.role"label="身份"min-width="70px"></el-table-column><el-table-columnprop="info.description"label="描述"min-width="200px"></el-table-column><el-table-columnprop="info.usable"label="可用性"min-width="70px"></el-table-column></el-table></el-card><el-inputv-model="check_name"placeholder="请输入用户名"style="width:300px;margin-top:20px;"></el-input><el-buttontype="primary"plain@click="isAccountEnable">检查用户可用性</el-button><div>{{ check_name_is_usable}}</div></template><stylescoped></style>

在修改main.js , 想要使用element-plus组件，需要先在main.js里导入并use(ElementPlus)，这里顺便把vue-router加入进来

npminstallvue-router@next

import{createApp }from'vue'import'./style.css'import'element-plus/theme-chalk/dark/css-vars.css'importElementPlus from'element-plus'import'element-plus/dist/index.css'importApp from'./App.vue'import{createRouter }from'vue-router'import{createWebHistory }from'vue-router'importMainPage './components/MainPage.vue'constrouter =createRouter({history:createWebHistory('frontend'),//加上frontend前缀，配置nginx代理的时候也配置了routes:[{path:'/:pathMatch(.*)*',name:'NotFound',redirect:'/404'},{path:'/404',name:'NotFound',component:NotFound },//像编写MainPage一样，在编写一个404 NotFound页面，当输入路径找不到时会自动切换到404页面{path:'/main',name:'Main',component:MainPage}]})constapp =createApp(App)app.use(ElementPlus)app.use(router)//在这里将router对象使用，后续app内其他的组件才能可见这个路由规则// app.provide方法，相当于定义了全局的变量，我们将本地和远程的路径网址放在这里声明，这样比较方便切换，而不需要每一个组件内都检查修改，在组件内可以通过inject('base_url')读取。感谢你陪我一起看到这里，这个专栏仅作为记录这个项目的实现过程。
系统和环境
系统平台: 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包形式运行)
前端UI 前端路由
这一节将会使用到element-plus来搭建界面ui，vue-router来实现前端页面的路由跳转，以及使用axios访问后端api，实现前后端交互。
由于使用的ssl证书是临时生成的，没有经过安全认证，所以可能会出现这个警告页面，选择继续访问就可以了
结束
至此，一个较为完整的部署在云端的前后端项目就完成了，其他复杂的功能和UI在此基础上可以继续延申和优化。
进阶前后端交互 二 前端UI和axios
前言
系统和环境
前端UI 前端路由
axios
element-plus
更新服务器资源
结束
前言
根据我的经验，在这里给出一些建议仅供参考：
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项目；
本地运行vue前端连接的springboot端口和服务器运行vue前端连接的端口路径可能不同，打包发布前注意进行切换，这是一个忠告。app.provide('base_url','http://127.0.0.1:8080')// app.provide('base_url', 'https://IP')app.mount('#app')

打开App.vue，更新下面的内容

<scriptsetup>import{ref,computed,onMounted,onUnmounted }from'vue';import{useRouter }from'vue-router';constrouter =useRouter()//使用Router,如果main.js没有进行app.use(router)那么这里运行就会报错onMounted(()=>{console.log('app mounted')//设计app启动时的路由规则，例如保持登录的情况下，重新进入/路由应该会被自动引导到登陆后的页面/MainPage，这里我们没有登陆页面，所以只能直接进入MainPage 或者 404，这里让router决定//to代表目标路由，一般是浏览器地址栏输入//from指代原来的位置，一般是当前位置向目标路由跳转//next是下一步动作，next()保持向to跳转,next({name:'Login'})表示向名为Login的路由跳转，而不是向torouter.beforeEach((to,from,next)=>{// console.log('beforeEach', to, from,router.hasRoute(to.name))next()})}</script><template><!-- <router-view />当我们使用router做路由时，这里就相当于一个占位符，用来显示路由匹配到的组件,而不用提前将组件写在这里；即也可以用来做页面跳转的效果 --><router-view></router-view></template>

保存所有文件，在my-vue-app目录下，打开终端

npmrun dev>my-vue-app@0.0.0 dev>vite  VITE v5.4.8  ready in1430ms  ➜  Local:   http://localhost:5173/  ➜  Network: use --host to expose  ➜  press h + enter to show help

浏览器地址栏输入http://localhost:5173/frontend/main或 http://127.0.0.1:5173/frontend/main查看效果
可以看见如下页面，点击刷新，查询用户列表，输入用户名，点击查看用户可用性

更新服务器资源

到这里如果顺利的话，下一步准备上传到服务器上。看见上面的页面成功显示，则大功告成。