目錄
- 序
- 正文
-
- 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 遠端連接配接測試
- 運作項目:
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: './',
改成/
:./
【分析】:
打包項目之後,我們通常是把dist檔案裡面被壓縮後的npm run build
檔案跟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>./
參考分析位址
- 打開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: ‘…/…/’
- 重新打包
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表格
…更多參考cungudfa部落格Vue分類
● 後端:源碼Github-cungudafa-Springboot
- jpa+mysql8實作CRUD操作
- fastjson格式控制
- cors跨域處理
- Lombok優雅的編碼+Aop異常統一管理
…更多參考cungudafa部落格Springboot分類
● 整合
- 部署mysql和Springboot項目到阿裡雲伺服器
- 部署Vue項目到阿裡雲伺服器(Apache環境)(本文)