Vue CLI提供了一個public文件夾用于存放靜態資源,包括HTML、CSS、JS、圖片等。這些文件可以直接在HTML中使用,其路徑為根路徑下的相對路徑。
由于public文件夾下的文件不會經過webpack編譯,因此可以用于存放一些不需要打包的資源,例如CDN上的第三方庫、一些公共的靜態資源等。
public
├── index.html
├── favicon.ico
├── manifest.json
└── assets
├── logo.png
└── logo.svg
上面是一個典型的public文件夾結構示例,其中index.html為入口文件,favicon.ico為網站圖標文件,manifest.json為PWA配置文件,assets文件夾存放各種圖片資源。
在使用public文件夾中的資源時,只需在HTML中如下引用即可:
<link rel="icon" href="/favicon.ico">
<link rel="manifest" href="/manifest.json">
<img src="/assets/logo.png">
以上代碼中,/favicon.ico和/manifest.json分別代表public文件夾下的favicon.ico和manifest.json文件,/assets/logo.png代表public文件夾下的assets/logo.png文件。
總之,public文件夾是Vue CLI中一個非常實用的功能,通過將靜態資源放在其中,可以方便地在HTML中引用,并避免不必要的打包。
上一篇gin 獲取json