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

2021-02-17 754

序

【前言】
前面一文，详细讲述后端如何部署到阿里云服务器上：部署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>
改为：./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

…更多参考cungudfa博客Vue分类

● 后端：源码Github-cungudafa-Springboot

…更多参考cungudafa博客Springboot分类

● 整合

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

微信关注我们

原文链接：https://my.oschina.net/u/4562984/blog/4953330

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

uni-app 全局变量实现的4种方式

一、公用模块定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入。注意：这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。示例如下：在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 base.js 用于定义公用的方法。 const websiteUrl = 'http://www.XXXX.cn'; const now = Date.now || function () { return new Date().getTime(); }; const isArray = Array.isArray || function (obj) { return obj instanceof Array; }; export default { websiteUrl, now, isArray } 接下来在 pages/index/index.vue 中引用该模块 <script> import helper from '/comm...

2021-02-16

531

两年前，我写了一篇关于业务缓存的博客前端 api 请求缓存方案, 这篇博客反响还不错，其中介绍了如何缓存数据，Promise 以及如何超时删除（也包括如何构建修饰器）。如果对此不够了解，可以阅读博客进行学习。但之前的代码和方案终归还是简单了些，而且对业务有很大的侵入性。这样不好，于是笔者开始重新学习与思考代理器 Proxy。 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。关于 Proxy 的介绍与使用，建议大家还是看阮一峰大神的 ECMAScript 6 入门代理篇。项目演进任何项目都不是一触而就的，下面是关于 Proxy 缓存库的编写思路。希望能对大家有一些帮助。 proxy handler 添加缓存当然，其实代理器中的 handler 参数也是一个对象，那么既然是对象，当然可以添加数据项，如此，我们便可以基于 Map 缓存编写 memoize 函数用来提升算法递归性能。 type ...

2021-02-17

421

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

JDK

JDK是 Java 语言的软件开发工具包，主要用于移动设备、嵌入式设备上的java应用程序。JDK是整个java开发的核心，它包含了JAVA的运行环境（JVM+Java系统类库）和JAVA工具。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。