Vue cli 多頁相關配置記錄

2021-10-09 07:20:06 字數 1087 閱讀 5730

搭建乙個順手的mpa專案腳手架,其實根據專案的不同目錄結構和打包配置都可以進行靈活的調整。這次的專案可能是包含各種客戶端和管理後台在一起的綜合專案所以需要將樣式和指令碼做比較好的隔離。許可權驗證可以使用統一的模組,然後每個單獨spa中根據需求再單獨實現資料或者功能許可權的控制。

因為專案間的差異可能會比較大,所以除了基礎的依賴以及一些通用的service.其他模組之間需要做好隔離。每個module 就是單獨的乙個spa,可以擁有自己的一套styles,route,store,components

總體擁有一些公用的指令碼、scss函式、靜態檔案等。

為了達到盡可能的隔離,所以公共chunk只包含最基本的公共庫,比如vue。但是 vue-cli提供的預設打包配置,是比較適用於單頁應用的。

用於提取公共模組,預設配置會將所有頁面引入的打包到chunk-vendors.js。然後將其他第三方公共庫都統一打包到chunk-common.js中去,這就導致了可能我這個頁面完全沒有用某個第三方庫(比如:element-ui),但是還是要載入相關資源。造成載入的極大浪費。

這裡利用配置的minchunks字段提取公共模組,其他的都單獨載入。

config.optimization.splitchunks(,

common: {}

}});

這裡是否將樣式提取到統一的css檔案。和之前一樣的問題每個頁面都需要單獨的css。

cs***tract = ;
如果有公共的第三方css,需要單獨配置。

這個是為了提高打包效率的外掛程式,通過快取dll使得二次載入速度提高了很多。

const hardsourcewebpackplugin = require("hard-source-webpack-plugin")

configurewebpack: ,

使用 vue cli 開發多頁應用

開啟 build webpack.base.conf.js,找到entry,新增多入口 entry 執行 編譯的時候每乙個入口都會對應乙個chunk 開啟 build webpack.dev.conf.js,在plugins下找到new htmlwebpackplugin,在其後面新增對應的多頁,並...

Vue cli配置多頁面

vue cli可以配置vue.config.js的pages選項,實現多頁面應用開發 module.exports 當使用只有入口的字串格式時,模板會被推導為 public subpage.html 並且如果找不到的話,就回退到 public index.html 輸出檔名會被推導為 subpage...

Vue cli安裝方法和單頁改為多頁應用的記錄

其實把vue腳手架 vue cli 從單頁改為多頁,在網上有很多的教程。大佬請路過 我就做個記錄,以免以後會用到,如果能幫到其他人的更好。不廢話了,進入正題。node安裝好了之後就可搭建vue cli了,在安裝之前先檢查node版本,最好是最新的版本,不然用老版本的話會出現一些意想不到的驚喜。可以 ...