在Vue中,public文件夾是一種很常見的資源存儲方式。由于public文件夾中的文件不會經過webpack編譯,因此可以在項目中直接引用這些文件。那么,在Vue中,public文件夾地址到底是什么呢?
public/ ├── favicon.ico ├── index.html └── manifest.json
在一個新創建的Vue項目中,我們可以打開項目根目錄下的public文件夾,看到其中包含了三個文件:favicon.ico,index.html和manifest.json。這三個文件都是項目所需要的基礎文件。
其中一個比較重要的文件是index.html,這是Vue項目的基礎文件。通過查看Vue項目的根目錄下的vue.config.js文件,可以看到以下代碼:
module.exports = { pages: { index: { entry: 'src/main.js', template: 'public/index.html', filename: 'index.html', title: 'Vue App' } } }
我們可以發現,在pages里面定義了一個index頁面,entry、template和filename的值分別為'src/main.js'、'public/index.html'和'index.html'。也就是說,Vue在構建項目時,會以public/index.html文件為基礎,將生成的JavaScript、CSS、圖片等資源動態插入到其中。
另外,在Vue項目的根目錄下,還有一個叫做.env的文件,用來設置環境變量。在.env文件中,可以設置公共文件的路徑。例如,我們可以在.env文件中設置公共靜態文件的地址:PUBLIC_URL=/my-assets/。然后,在項目中引用公共靜態文件時,就可以使用這個路徑了。
< img src='<%= process.env.PUBLIC_URL %>/images/my-image.jpg' />
在這個例子中,我們使用了process.env.PUBLIC_URL這個環境變量,表示公共靜態文件的地址。然后,將這個地址和需要引用的具體文件名拼接起來,就可以獲取到這個文件了。
總結一下,Vue中的public文件夾是存儲公共資源的一種方式,包括了項目的基礎文件和其他公共靜態文件。公共靜態文件的路徑可以在.env文件中設置環境變量,然后在項目中通過process.env.PUBLIC_URL這個環境變量來引用這些公共靜態文件。