如何解決.vue文件url引用文件的問題
更新時間：2019年01月18日 10:33:45 作者：Chendye
這篇文章主要介紹了解決.vue文件url引用文件的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
解決.vue文件url引用文件的問題
遇到的問題：
- 在css中引入圖片，明明目錄結(jié)構(gòu)是對的，還是
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文件寫相對路徑
根據(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ù)實際情況配：
//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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue項目中,Axios是一個非常流行的HTTP客戶端,用于發(fā)送請求和接收響應,Axios攔截器是Axios的一個強大功能,它允許你在請求發(fā)送之前和響應返回之后對請求和響應進行處理和攔截,本文將結(jié)合實際案例,詳細介紹如何在Vue中使用Axios攔截器,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了在iview+vue項目中使用自定義icon圖標方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了vue用BMap百度地圖實現(xiàn)即時搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
前端構(gòu)建工具Webpack、Vite區(qū)別有哪些
Webpack和Vite是兩種主流的前端構(gòu)建工具,它們在功能、性能和使用場景上有所不同,Webpack提供豐富的功能和配置,適合大型復雜項目,但可能導致啟動和構(gòu)建速度較慢,Vite基于ES模塊,支持快速的熱替換,適合小型或中等項目,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了解決vue項目打包后提示圖片文件路徑錯誤的問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
這篇文章介紹了Vue中的event對象，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
vue頁面不能根據(jù)路徑進行跳轉(zhuǎn)的解決方法
本文主要介紹了vue頁面不能根據(jù)路徑進行跳轉(zhuǎn)的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12
Vue3.2(21年8月10日)相比于Vue3新增了語法糖,減少了代碼冗余,下面這篇文章主要給大家介紹了關(guān)于Vue3.2語法糖使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
本文通過實例代碼給大家介紹vue實現(xiàn)3D標簽云的方法，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-07-07
今天小編就為大家分享一篇Vue防止白屏添加首屏動畫的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10