0%

[Vue]VueWepackTemplate檔案結構介紹

前提情要

上一篇介紹到vue-cli建立vue application,其中筆者示範選擇以webpack template作為預設專案結構。這一篇就來簡單介紹一下專案中的檔案結構以及經驗分享。

內容

先來貼一張vscode開啟後檔案結構:

以下解釋一下每個資料夾的用意,詳細參考 vue webpack template document,內容就以筆者到目前為止更改過的設定去做說明。

build

顧名思義,建置相關設定是在這目錄中的檔案設定,主要是hot loader及打包壓縮相關設定。此目錄中會調整到的檔案屬webpack開頭之檔案,還可為dev及prod做特別不同的設定。

若你是與筆者一樣是使用bootstrap作為網站切版基底則,且已經有UI/UX提供jquery效果則需要多加一些設定。設定步驟為

  • npm install方式安裝jquery、popperjs及bootstrap
  • webpack.base.conf.jsplugins相關設定
1
2
3
// const宣告區塊中增加
// 載入webpack
var webpack = require('webpack')
1
2
3
4
5
6
7
8
9
// module.exports中增加plugins option
plugins:[
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
]

切記:套用bootstrap4需安裝popperjs

上述設定完畢後,我們就直接在vue進入點App.vuescript區塊中import jquery以及mounted事件中把UI/UX提供的jquery code貼上去就大功告成。不方便在此直接秀公司的公版套用過程,先以敘述帶過,我再找時間補一篇套用sbadmin2的完整過程,比較會有感同身受。

config

專案環境變數相關設定,基本上就是在程式撰寫中依照development及prodution不同而變動的資料可以再此目錄中設定。

  • index.js
    預設會有兩種環境設定,devprod(build),因此npm run dev時使用的port可於此設定以及cors問題可用proxyTable的方式解決,參考呼叫跨網域API解決方式,筆者開發到目前為止,只改過這兩個設定,其他設定皆採用預設值。
  • dev.env.js、prod.env.js
    這兩個檔案中會建立同樣的key值不同value,透過跑npm run dev/build方式以不同的設定值去取代,舉個例子會比較好理解,在開發端及正式伺服器上呼叫的api網址會有所不一樣,這時就可以在這設定。
1
2
3
4
// env.dev.js
API_BASE_URL: '"http://localhost:5000/api"'
// env.prod.js
API_BASE_URL: '"http://serverip:5000/api"'

設定值需要按照格式,一定要使用一組單引號中有雙引號的方式'""'

在vue程式中使用方式為process.env.key,以上述例子來說宣告為

process.env.API_BASE_URL

需要注意的是設定完成後,需要重跑一次npm run dev/build才會生效

node_modules

安裝的套件皆在此目錄中。這目錄就不多加敘述。不過有時引用vue套件的話,透過觀看該套件的原始碼,也可以偷學到一些vue撰寫招數,也是滿有收穫的,不過就要先有基本概念再去參考,以免一開始就學到偷吃步的招數而走歪。

src

Vue程式在此目錄中撰寫。筆者目前就以功能面(模組)作為切分資料夾的依據存放Component,這就看各自的開發習慣作切割,以好找為主。

static

若有些特殊頁面不與vue相關,需要獨立宣告的靜態檔案可放與此。筆者就有經驗,因在實作Single sign out功能,使用過Identity Server4,Vue前端專案當作client與Identity Server互動時就需要撰寫callback程式,就會需要宣告於此目錄中,參考 vuejs-oidc-client

結論

此篇簡單的介紹一下webpack預設template產生之資料夾結構,若想要自己重頭設定起筆者推薦此篇 vue+webpack起手式,筆者出社會後都以C#作為主要開發語言,加上開發產品功能還是要緊,就先使用預設範本下去開發。不過還是要先看過這兩篇

才會有概念,到時遇到問題時就會知道要在google下甚麼關鍵字了。