天天看點

部署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

    部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文
    發送請求:

    http://www.cungudafa.top:8080/springboot/user/aop/check

    成功傳回頁面!?
    部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文

2. 打包Vue項目

2.1 修改打包配置(重要)

  1. 先在config/index.js把

    assetsPublicPath: './',

    原本是

    /

    改成

    ./

    :
    部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文
    【分析】:

    npm run build

    打包項目之後,我們通常是把dist檔案裡面被壓縮後的

    static

    檔案跟

    index.html

    送出到伺服器,但最近發現直接打開

    index.html

    頁面是空白的,還會報幾個錯,找不到頁面路徑。
    部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文

    因為在項目路徑下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跳轉路由頁面無法顯示。
    部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文

2.2 打包項目

  1. 本地生成dist檔案
    cnpm run build
    會在根目錄中有一個

    dist

    檔案夾
    部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文
  2. 找到工作空間下的

    dist

    檔案夾目錄,參考路徑如下:
    部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文
  3. 輕按兩下index.html測試:無報錯,成功運作:
    部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文

2.3 解決Element UI圖示不顯示問題

【問題描述】

部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文

【原因分析】

參考連結

【解決方法】

  1. 打開==build/utils.js ==檔案,在如下位置添加 publicPath: ‘…/…/’
    部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文
  2. 重新打包
    cnpm run build

圖示顯示成功!?

部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文

3. 部署Vue項目

  1. 使用Xftp 在 Apache-tomcat/webapps 目錄下建立

    vue

    目錄,并上傳

    dist

    檔案夾的内容到

    vue

    目錄下
    參考路徑:

    /usr/local/apache-tomcat-9.0.16/webapps/vue

    部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文
  2. 在xhell中重新開機tomcat伺服器
    cd ~
    cd /usr/local/apache-tomcat-9.0.16/bin
    ./startup.sh
               
  3. 浏覽器輸入:

    http://cungudafa.top:8080/vue/index.html

    釋出成功!?
    部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文

4. cungudafa的項目總結

4.1 第一個Vue-Springboot前後端分離demo

cungudafa的vue-Demo快速連結

登入名:

admin

,密碼:

123456

部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文

這裡有簡單的

使用者管理界面

圖表界面

部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文
部署Vue項目到阿裡雲伺服器(Apache環境)+ 本次項目總結序正文

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環境)(本文)

繼續閱讀