部署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项目到阿里云服务器

本文重点：前端Vue模块部署到阿里云服务器上

【系统】：

本地 ：win10 + IDEA + MySQL8 + HBuilder

连接：Xftp + Xshell + Navicat

云服务器：阿里云ETC控制台 + LAMP +MySQL5

技术栈：springboot + Vue + Linux

【总结】：

一步一步做就好了，今天不是coder是运维了，哈哈哈哈~

正文

1. Vue 连接远程服务器

1.1 修改axios配置

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的绝对路径。

   相当于：<link href=

   /

   static/css/app.88478a86ff27f9cac8cfd0fc976676ad.css rel=stylesheet>

   改为：<link href=

   ./

   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: ‘…/…/’

   

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项目到阿里云服务器
2. 部署Vue项目到阿里云服务器（Apache环境）（本文）