目录
序
【前言】
前面一文,详细讲述后端如何部署到阿里云服务器上:部署Springboot项目到[阿里云](https://l.gushuji.site/aliyun)服务器本文重点:前端Vue模块部署到[阿里云](https://l.gushuji.site/aliyun)服务器上
【系统】:
本地 :win10 + IDEA + MySQL8 + HBuilder
连接:Xftp + Xshell + Navicat
云服务器:阿里云ETC控制台 + LAMP +MySQL5
技术栈:springboot + Vue + Linux
【总结】:
一步一步做就好了,今天不是coder是运维了,哈哈哈哈~
正文
1. Vue 连接远程服务器
1.1 修改axios配置
axios.defaults.baseURL="http://www.cungudafa.top:8080/springboot"
1.2 远程连接测试
-
运行项目:
cnpm run dev
-
浏览器打开:
http://localhost:8080
登录名:
admin
,密码:123456
发送请求:http://www.cungudafa.top:8080/springboot/user/aop/check
成功返回页面!?
2. 打包Vue项目
2.1 修改打包配置(重要)
-
先在config/index.js把
assetsPublicPath: './',
原本是/
改成./
:【分析】:
npm run build
打包项目之后,我们通常是把dist文件里面被压缩后的static
文件跟index.html
提交到服务器,但最近发现直接打开index.html
页面是空白的,还会报几个错,找不到页面路径。
因为在项目路径下index.html在根目录下,现在要求和static同级;这一步是为了匹配css和js的绝对路径。
相当于:
改为:./static/css/app.88478a86ff27f9cac8cfd0fc976676ad.css rel=stylesheet> -
打开router/index.js修改路由配置,
mode:' hash '
改这个配置即可,如图:index.html页面可以正常打开无报错,但显示空白,vue-router跳转路由页面无法显示。
2.2 打包项目
-
本地生成dist文件
cnpm run build
会在根目录中有一个
dist
文件夹 -
找到工作空间下的
dist
文件夹目录,参考路径如下: -
双击index.html测试:无报错,成功运行:
2.3 解决Element UI图标不显示问题
【问题描述】
【原因分析】
参考链接
【解决方法】
-
打开==build/utils.js ==文件,在如下位置添加 publicPath: ‘…/…/’
publicPath:'../../'//解决部署到服务器后Element UI图标不显示问题
-
重新打包
cnpm run build
图标显示成功!?
3. 部署Vue项目
-
使用Xftp 在 Apache-tomcat/webapps 目录下新建
vue
目录,并上传dist
文件夹的内容到vue
目录下参考路径:
/usr/local/apache-tomcat-9.0.16/webapps/vue
-
在xhell中重启tomcat服务器
cd ~ cd /usr/local/apache-tomcat-9.0.16/bin ./startup.sh
-
浏览器输入:
http://cungudafa.top:8080/vue/index.html
发布成功!?
4. cungudafa的项目总结
4.1 第一个Vue-Springboot前后端分离demo
cungudafa的vue-Demo快速链接
登录名:admin
,密码:123456
这里有简单的用户管理界面
和图表界面
4.2 本次项目快速链接
● 前端: 源码Github-cungudafa-Vue
- Vue-router+Element-ui+Vuex+axios实现前后端分离–登录实例
- Element-ui+SvgIcon优雅的登录界面+折叠菜单栏+面包屑
- Element-table表格+Pagination 分页(前后端结合)
- 在线导出Excel表格
● 后端:源码Github-cungudafa-Springboot
● 整合
- 部署mysql和Springboot项目到[阿里云](https://l.gushuji.site/aliyun)服务器
- 部署Vue项目到阿里云服务器(Apache环境)(本文)