【前言】
前面一文,详细讲述后端如何部署到阿里云服务器上:部署Springboot项目到阿里云服务器
本文重点:前端Vue模块部署到阿里云服务器上

【系统】:
本地 :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.jsassetsPublicPath: './',原本是/改成./:
    在这里插入图片描述

    【分析】:
    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: ‘…/…/’
    publicPath:'../../'//解决部署到服务器后Element UI图标不显示问题
    
    在这里插入图片描述
  2. 重新打包

    cnpm run build

图标显示成功!?
在这里插入图片描述

3. 部署Vue项目

  1. 使用XftpApache-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环境)(本文)
Logo

前往低代码交流专区

更多推荐