Vue cli 3 設定baseurl

最近用Vue cli 3開發專案的時候發現,想build產生一個靜態html檔,並部署在網頁伺服器的其他資料夾,就必須在vue.config.js做一些設定,不然產生出來的html檔,所參考的css檔和js檔都是以預設根目錄為主,像這樣

<script src=/js/app.e46b869a.js></script>

但我們會希望是這樣

<script src=js/app.e46b869a.js></script>

因此需要在vue.config.js加上以下設定

module.exports = {
    baseUrl: './'
}

但是加了這個設定,就會發現在開發模式的時候,使用npm run serve時,會無法熱重載,也就是程式碼做任何改變,都無法立刻變動,我一開始也覺得很奇怪,沒想到是跟這個設定有關係,要改成以下這樣

module.exports = {
    baseUrl: process.env.NODE_ENV === 'production' ? './' : '/'
}

讓這個設定在開發模式下是依照根目錄的,因為開發模式vue cli會自動建一個網頁伺服器,而所有資源都以根目錄為主的,才會造成改了這個設定後,無法熱重載。

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *