前言: node中的全局變量require
開始前,咱們先聊聊node中require的用法。
您可能覺得這有什麼,不就是直接require(url)直接引用嗎,如果您這麼想,那可就太小看require了。
let url = "@/assets/images/carousel/logo.svg"
require(url) //報錯
let url = "logo.svg"
require("@/assets/images/carousel/"+url); //正確
很詭異是不是? 我相信你第一次見到後會不自覺的說句f**k。
這是因爲你修改頁面後,webpack進行編譯,等待編譯完,需要進行工程的打包,然後打包正確,才能熱加載運行並刷新頁面。
如果require中傳入的是個變量,它有可能是計算機系統中的任何目錄下的任何文件,那麼在打包靜態資源時它有可能會將你的電腦整個磁盤遍歷一遍(它很傻)。所以至少需要給出在哪個路徑下,這樣才能精確的將那個路徑下的對應文件打包,然後在代碼運行時,直接用對應文件名生成正則匹配(因爲打包後的文件,可能有hash值。不能直接查文件名),找到後,加載到代碼中。
所以,請記住 儘可能詳細的指定require中的路徑,然後拼接變量
接下來說下打包後的路徑問題
webpack將項目中的靜態資源編譯打包後,生成的路徑已經不是原來的那個路徑了。如
src/assets/image/logo.jpg
編譯後可能變成
dist/public/image/logo.1d997ea3.jpg
而通過require("src/assets/image/logo.jpg"),會自動找到並加載dist/public/image/logo.1d997ea3.jpg文件
一、<template>部分的路徑處理
Vue Loader 在編譯單文件組件中的 <template> 塊時,它也會將所有遇到的資源 URL 轉換爲 webpack 模塊請求。(這樣我們就沒必要手動調用require了,而是交給vue-loader處理了)
vue-loader默認可以處理的標籤/特性的組合如下:
{
video: ['src', 'poster'],
img: 'src', //即img元素上的src屬性
source: 'src', //source元素上的src屬性
image: 'xlink:href'
}
面對上面的標籤組合,vue-loader會自動進行資源url的轉換。
轉換規則:
a、如果路徑是絕對路徑,會被原樣保留。如/src/assets/image/login/title.png
//代碼
<template>
<img src="/src/assets/image/login/title.png" alt="">
</template>
//渲染後html頁面
<img data-v-70c98a68="" src="/src/assets/image/login/title.png" alt="">
//當然這個圖片是無法展示的,因爲編譯後title.png已不在src/assets/image/login下了
b、如果路徑以 . 開頭,將會被看作相對的模塊依賴。如 ./titlea.png
//代碼
<img src="./titlea.png" alt="">
//渲染後html頁面
<img data-v-70c98a68="" src="/static/img/titlea.1e9fa570.png" alt="">
c、如果路徑以 @ 開頭,也會被看作模塊依賴。如果你的 webpack 配置中給 @ 配置了 alias,這就很有用了。所有 vue-cli 創建的項目都默認配置了將 @ 指向 /src
//代碼
<img src="@/assets/image/login/title.png" alt="">
//渲染後html頁面
<img data-v-70c98a68="" src="/static/img/title.1e9fa570.png" alt="">
d、如果路徑以 ~ 開頭,其後的部分將會被看作模塊依賴,既可以加載含有別名的靜態資源,又可以加載node-modules中的資源。如
//代碼
<img src="~@/assets/image/login/title.png" alt="">
//渲染後html頁面
<img data-v-70c98a68="" src="/static/img/title.1e9fa570.png" alt="">
//代碼
<img src="~[npm包名]/xxx/logo.png" alt="">
//渲染後的html頁面
<img data-v-70c98a68="" src="/static/img/logo.2f53e458.png" alt="">
二、<style>部分部分的路徑處理
由於vue-loader在處理style時,採用的是style-loader,所以可能 和上面<template>部分的轉換規則不太一樣。
在vue-loader的內部使用瞭如下的配置(不一定配置,也有可能通過js直接給rules賦值):
//在vue-loader的內部使用css-loader
module.exports = {
module: {
rules: [
{
test: /\.css$/,
loader: 'css-loader',
options: {
url: true, //默認選項
},
},
],
},
};
url爲true時,則意味着可以將url中的字符串通過require()加載進來。
轉換規則
//代碼
<style scoped>
.login-wrap {
background-image: url("/src/assets/image/login/title.png");
}
</style>
//渲染後css
.login-wrap[data-v-70c98a68] {
background-image: url(/src/assets/image/login/title.png);
}
同樣不會顯示,編譯後的路徑不是這個
b、如果路徑以 . 開頭,將會被看作相對的模塊依賴。如 ./titlea.png
//代碼
<style scoped>
.login-wrap {
background-image: url("./titlea.png");
}
</style>
//渲染後css
.login-wrap[data-v-70c98a68] {
background-image: url(/static/img/titlea.1e9fa570.png);
}
c、如果路徑以 ~ 開頭,其後的部分將會被看作模塊依賴,即可以加載含有別名的靜態資源,又可以加載node-modules中的資源。如
//代碼
<style scoped>
.login-wrap {
background-image: url("~[npm包名]/logo.png");
}
</style>
//渲染後css
.login-wrap[data-v-70c98a68] {
background-image: url(/static/img/logo.e05643fc.png);
}
//代碼
<style scoped>
.login-wrap {
background-image: url("~@/assets/image/login/bg.png");
}
</style>
//渲染後css
.login-wrap[data-v-70c98a68] {
background-image: url(/static/img/bg.1d997ea3.png);
}
注意: 和上面的<template>相比,唯獨少了直接用@開頭的方式url("@/assett/logo.png"),所以下面寫法是錯誤的
//代碼
<style scoped>
.login-wrap {
background-image: url("@/assets/image/login/bg.png");
}
</style>
感謝各位看客的閱讀,由於在項目中遇到了這樣的困然,再加上同事也經常問我什麼原因,故而填坑,以免其他人踩坑。