之前是從Vue-CLI 2開始接觸網頁這一塊的,最近不久Vue-CLI 3推出之後一直考慮是否要升級,希望能無痛轉移哈哈,考慮了一陣子還是該踩踩坑啦!!順便剛好手邊有機會來著手碰碰Vue-CLI 3直接支援的PWA(目前頭痛不願面對阿~~~)。 安裝: Vue CLI v3 要求 Node.js V8 或更高版本(建議版本 8.10.0+ )。 能使用npm或yarn進行安裝,我自己是用npm~ npm install -g @vue/cli or yarn global add @vue/cli 安裝完後可透過 vue -V 來確認版本是否為3.0 建立新專案: 以前是透過 vue init my-project 來建置新專案,而Vue CLI 3則改成使用 vue create my-project 來代替原本舊的寫法。 接下來開始安裝畫面:詢問安裝套件(我選擇自選) 然後開始選擇想要的套件(我有選擇pwa剛好可以練練,其他router、vuex我習慣手動裝) 詢問配置文件要獨立還是放package.json 是否記住這些選項 過來就等待安裝啦~~接下來要開專案囉。 cd my-project npm run serve 不再是以前的 npm run dev 我們執行指令之後,Vue-CLI會啟動一個http服務,可以從localhost打開。然後我們打開網頁。 而和之前一樣若要把程式碼打包,丟server讓網頁上架一樣的指令,把程式碼build到dist資料夾。 npm run build vue.config.js 設定: 會發現以前的webpack.config.js不見了!!沒錯被隱藏起來了,假如有要改配置的話要手動新增 vue.config.js放在根目錄中(假如沒有要改就不用手動就用預設)。 相關配置請查詢官方設定 請按這裡 。(底下為示範) module.exports = { baseUrl: '/', outputDir: 'dist', compiler: false, chainWebpack: () => {}, configureWebpack: () => {}, v