部署Vue项目到阿里云服务器（Apache环境）+ 本次项目总结

目录

• 序
• 正文
• * 1. Vue 连接远程服务器
  • * 1.1 修改axios配置
    • 1.2 远程连接测试
  • 2. 打包Vue项目
  • * 2.1 修改打包配置（重要）
    • 2.2 打包项目
    • 2.3 解决Element UI图标不显示问题
  • 3. 部署Vue项目
  • 4. cungudafa的项目总结
  • * 4.1 第一个Vue-Springboot前后端分离demo
    • 4.2 本次项目快速链接

序

【前言】
前面一文，详细讲述后端如何部署到阿里云服务器上：部署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 远程连接测试

1. 运行项目：

   cnpm run dev

2. 浏览器打开：

   http://localhost:8080

   登录名：admin，密码：123456
   
   发送请求：http://www.cungudafa.top:8080/springboot/user/aop/check
   成功返回页面！?
   

2. 打包Vue项目

2.1 修改打包配置（重要）

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>
   改为：./static/css/app.88478a86ff27f9cac8cfd0fc976676ad.css rel=stylesheet>

   参考分析地址

2. 打开router/index.js修改路由配置，mode:' hash '改这个配置即可，如图：

   index.html页面可以正常打开无报错，但显示空白，vue-router跳转路由页面无法显示。

   

2.2 打包项目

1. 本地生成dist文件

   cnpm run build

   会在根目录中有一个dist文件夹
   

2. 找到工作空间下的dist文件夹目录,参考路径如下：
   

3. 双击index.html测试：无报错，成功运行：
   

2.3 解决Element UI图标不显示问题

【问题描述】

【原因分析】
参考链接

【解决方法】

1. 打开==build/utils.js ==文件，在如下位置添加 publicPath: ‘…/…/’

   publicPath:'../../'//解决部署到服务器后Element UI图标不显示问题
   

   

2. 重新打包

   cnpm run build

图标显示成功！?

3. 部署Vue项目

1. 使用Xftp 在 Apache-tomcat/webapps 目录下新建vue目录，并上传dist文件夹的内容到vue目录下

   参考路径：
   /usr/local/apache-tomcat-9.0.16/webapps/vue

   

2. 在xhell中重启tomcat服务器

   cd ~
   cd /usr/local/apache-tomcat-9.0.16/bin
   ./startup.sh
   

3. 浏览器输入：http://cungudafa.top:8080/vue/index.html
   发布成功！?
   

4. cungudafa的项目总结

4.1 第一个Vue-Springboot前后端分离demo

cungudafa的vue-Demo快速链接
登录名：admin，密码：123456

这里有简单的用户管理界面和图表界面

4.2 本次项目快速链接

● 前端： 源码Github-cungudafa-Vue

1. Vue-router+Element-ui+Vuex+axios实现前后端分离–登录实例
2. Element-ui+SvgIcon优雅的登录界面+折叠菜单栏+面包屑
3. Element-table表格+Pagination 分页（前后端结合）
4. 在线导出Excel表格

…更多参考cungudfa博客Vue分类

● 后端：源码Github-cungudafa-Springboot

1. jpa+mysql8实现CRUD操作
2. fastjson格式控制
3. cors跨域处理
4. Lombok优雅的编码+Aop异常统一管理

…更多参考cungudafa博客Springboot分类

● 整合

1. 部署mysql和Springboot项目到[阿里云](https://l.gushuji.site/aliyun)服务器
2. 部署Vue项目到阿里云服务器（Apache环境）（本文）