部署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環境）（本文）