Vue中靜態地址的使用方式

處理資源路徑

當你在JavaScript、CSS或 *.vue 文件中使用相對路徑，必須以.開頭引用一個靜態資源，該資源將被webpack處理。 如果你把靜態資源放在 public文件中，則不會被webpack處理。

路徑的轉換規則

• 如果路徑是絕對路徑，會被原樣保留

<img src="/src/assets/image/logo.png" alt="">

// 渲染后的html
<img data-v-780434df src="/src/assets/image/logo.png" alt="">
// 這個圖片是無法展示的，因為編譯后文件以及不在src/assets/image文件夾下了

• 如果路徑以 . 開頭，將會被看作相對的模塊依賴

<img src="./assets/image/logo.png" alt="">

// 渲染后
<img data-v-704534df src="/static/img/logo.lere34534.png" alt="">

• 如果路徑以 @ 開頭，也會被看作模塊依賴。如果你的 webpack 配置中給 @ 配置了 alias，所有vue-cli 創建的項目都默認配置了將 @ 指向 /src

<img src="@/assets/image/logo.png" alt="">

// 渲染后
<img data-v-704534df src="/static/img/logo.lere34534.png" alt="">

• 如果路徑以 ~ 開頭，其后的部分將會被看作模塊依賴，既可以加載含有別名的靜態支援。又可以加載node-modules中的資源 。

<img src="~@/assets/image/logo.png" alt="">
// 渲染后
<img data-v-704534df src="/static/img/logo.lere34534.png" alt="">

<img src="~[npm包名]/assets/image/logo.png" alt="">
// 渲染后
<img data-v-704534df src="/static/img/logo.lere34534.png" alt="">

何時使用 public 文件夾

** 通過webpack的處理並獲得以下好處：**

• 腳本和樣式表會被壓縮且打包在一起，從而避免額外的網絡請求
• 文件丟失會直接編譯時報錯，而不是到了用戶端產生404錯誤
• 最終生成的文件名包含了內容哈希，因此不必擔心瀏覽器會緩存老版本

以下情況考慮使用 public 文件夾：

• 需要在構建輸出中指定一個固定的文件名字
• 有很多圖片，需要動態的去引用它們的路徑
• 有些庫可能和webpack不兼容，除了將其用一個獨立的 script 標簽引入沒有別的選擇

使用 public 文件夾的注意事項

• 如果你的應用沒有部署在域名的根目錄下，那么你需要為你的 URL 配置 publicPath 前綴

// vue.config.js 
module.exports = {
    publicPath: process.en.NODE_ENV === 'production' ? '/cart/' : '/'
}

• 在 public/index.html 等通過 html-webpack-plugin 用作模板的 HTML 文件中， 你需要通過 <%= BASE_URL %> 設置鏈接前綴

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

• 在模板中，先向組件傳入BASE_URL

<template>
	<img :src=`${publicPath}image/logo.png` alt="">
</template>

<script>
data() {
    return {
        publicPath: process.env.BASE_URL
    }
}
</script>