[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.js加plugins相關設定

// const宣告區塊中增加
// 載入webpack
var webpack = require('webpack')

// module.exports中增加plugins option
plugins:[
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
    })
]

切記：套用bootstrap4需安裝popperjs

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

config

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

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

// 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#作為主要開發語言，加上開發產品功能還是要緊，就先使用預設範本下去開發。不過還是要先看過這兩篇

• vue webpack template document
• vue+webpack起手式

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

---

Buy me a coffee