如何解決.vue文件url引用文件的問題
更新時(shí)間：2019年01月18日 10:33:45 作者：Chendye
這篇文章主要介紹了解決.vue文件url引用文件的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
解決.vue文件url引用文件的問題
遇到的問題：
- 在css中引入圖片，明明目錄結(jié)構(gòu)是對(duì)的，還是
This dependency was not found； dev好好的，build之后涼涼，圖片加載404
添加圖片路徑配置
webpack 添加 alias
//webpack.base.conf.js
alias: {
'@': resolve('src'),
//加入
'assets': resolve('src/assets')
}
路徑書寫規(guī)則
template可使用@、~style只能使用~script只能使用@- 不需要經(jīng)過打包的
static文件寫相對(duì)路徑
根據(jù)limit:10000，使用兩張圖片：
<template>
<div>
<div>
img+src：@
<img src="@/assets/images/jiaban.jpg" height="200px">
<img src="@/assets/images/cat.png" alt="">
</div>
<div>
img+src：~
<img src="~assets/images/jiaban.jpg" height="200px">
<img src="~assets/images/cat.png" alt="">
</div>
<div>
img+js(attrs):
<img :src="jiaban" height="200px">
<img :src="cat" alt="">
<ul>
<li>{{jiaban}}</li>
<li>{{cat}}</li>
</ul>
</div>
<div class="css-bg">
img+css(background-images):
<span class="css-bg__1"></span>
<span class="css-bg__2"></span>
</div>
<div>
static：
<img src="static/images/jiaban.jpg" height="200px">
<img src="static/images/cat.png" alt="">
</div>
</div>
</template>
<script>
const jiaban = require('@/assets/images/jiaban.jpg');
const cat = require('@/assets/images/cat.png');
export default {
data(){
return {
jiaban,
cat
}
}
}
</script>
<style lang="scss">
.css-bg__1,
.css-bg__2{
display: inline-block;
}
.css-bg__1{
height: 200px;
width: 173px;
background-image: url(~assets/images/jiaban.jpg);
background-size: contain;
}
.css-bg__2{
height: 49px;
width: 49px;
background-image: url(~assets/images/cat.png);
background-size: contain;
}
</style>
開發(fā)環(huán)境截圖：
添加構(gòu)建路徑配置
添加ExtractTextPlugin中publicPath配置，這里根據(jù)實(shí)際情況配：
//build/util.js
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../',
})
} else {
return ['vue-style-loader'].concat(loaders)
}
生產(chǎn)環(huán)境截圖：
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue項(xiàng)目中,Axios是一個(gè)非常流行的HTTP客戶端,用于發(fā)送請(qǐng)求和接收響應(yīng),Axios攔截器是Axios的一個(gè)強(qiáng)大功能,它允許你在請(qǐng)求發(fā)送之前和響應(yīng)返回之后對(duì)請(qǐng)求和響應(yīng)進(jìn)行處理和攔截,本文將結(jié)合實(shí)際案例,詳細(xì)介紹如何在Vue中使用Axios攔截器,需要的朋友可以參考下2024-12-12
在iview+vue項(xiàng)目中使用自定義icon圖標(biāo)方式
這篇文章主要介紹了在iview+vue項(xiàng)目中使用自定義icon圖標(biāo)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue用BMap百度地圖實(shí)現(xiàn)即時(shí)搜索功能
這篇文章主要為大家詳細(xì)介紹了vue用BMap百度地圖實(shí)現(xiàn)即時(shí)搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
前端構(gòu)建工具Webpack、Vite區(qū)別有哪些
Webpack和Vite是兩種主流的前端構(gòu)建工具,它們?cè)诠δ?、性能和使用場景上有所不?Webpack提供豐富的功能和配置,適合大型復(fù)雜項(xiàng)目,但可能導(dǎo)致啟動(dòng)和構(gòu)建速度較慢,Vite基于ES模塊,支持快速的熱替換,適合小型或中等項(xiàng)目,需要的朋友可以參考下2024-10-10
解決vue項(xiàng)目打包后提示圖片文件路徑錯(cuò)誤的問題
這篇文章主要介紹了解決vue項(xiàng)目打包后提示圖片文件路徑錯(cuò)誤的問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
這篇文章介紹了Vue中的event對(duì)象，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
vue頁面不能根據(jù)路徑進(jìn)行跳轉(zhuǎn)的解決方法
本文主要介紹了vue頁面不能根據(jù)路徑進(jìn)行跳轉(zhuǎn)的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
Vue3.2(21年8月10日)相比于Vue3新增了語法糖,減少了代碼冗余,下面這篇文章主要給大家介紹了關(guān)于Vue3.2語法糖使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Vue中實(shí)現(xiàn)3D標(biāo)簽云的詳細(xì)代碼
本文通過實(shí)例代碼給大家介紹vue實(shí)現(xiàn)3D標(biāo)簽云的方法，代碼簡單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-07-07
今天小編就為大家分享一篇Vue防止白屏添加首屏動(dòng)畫的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10