Vue CLI 是一個用于構建 Vue.js 項目的基礎架構工具。Vue CLI 主要依靠 webpack 來處理項目的構建,其中涉及到 manifest.json 文件的生成,該文件包含了項目資源的所有版本信息和元數據。
在生成 manifest.json 文件時,Vue CLI 默認使用了插件 webpack-manifest-plugin,該插件會在構建期間逐個編譯文件,然后將它們的版本信息輸出到 manifest.json 中。
{ "name": "example", "short_name": "", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#ffffff", "icons": [ { "src": "/img/icons/android-icon-36x36.png", "sizes": "36x36", "type": "image/png" }, ... ], "assets": { "js": [ "app.87780d7f.js", "chunk-vendors.8d8525cc.js" ], "css": [ "app.5d88e580.css", "chunk-vendors.a693f3ac.css" ], "img": [ "logo.82b9c7a5.png", ... ] }, "version": "1.0.0", "description": "A simple example app" }
除了上述的默認配置外,Vue CLI 還提供了一些可自定義的選項,例如:pwa.manifestOptions
,這個選項可以用來自定義 manifest.json 文件中的一些屬性,如:name、short_name、description、icons 等。
在使用 Vue CLI 進行項目構建時,我們并不需要手動創建 manifest.json 文件,webpack-manifest-plugin 會為我們自動生成該文件,并將其輸出到dist
目錄下。我們只需要關注自己的項目代碼即可。同時,我們也可以在項目代碼中引用自己的 manifest.json 內容。