vue引用public文件夾中文件的多種方式
1 官方解釋
2 使用
可以先看最下面結(jié)論
在Test.vue組件中測試
2.1 圖片文件
方式一（ide正常，頁面正常，img標簽src屬性賦值絕對路徑/）：
<template>
<div class="view"><img src="/moon.png" /></div>
</template>
<script setup lang="ts">
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>
build后：
頁面顯示：
方式二 （ide警告,頁面正常,img標簽src屬性賦值絕對路徑/public）
<template>
<div class="view"><img src="/public/moon.png" /></div>
</template>
<script setup lang="ts">
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>ide警告：
build后：
可以看到，這樣的方式引用，會把圖片文件復(fù)制一份，名稱追加hash值，放在assets下面，根目錄下的moon.png并沒有被引用
頁面顯示：
方式三（ide警告，頁面正常，img標簽src屬性賦值相對路徑../../public）：
<template>
<div class="view"><img src="../../public/moon.png" /></div>
</template>
<script setup lang="ts">
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>
ide警告：
build后：
可以看到，這樣的方式引用，會把圖片文件復(fù)制一份，名稱追加hash值，放在assets下面，根目錄下的moon.png并沒有被引用
頁面顯示：
方式四（ide正常，頁面正常，img標簽src屬性綁定變量，變量賦值/）：
<template>
<div class="view">
<img :src="img" />
</div>
</template>
<script setup lang="ts">
const img = "/moon.png";
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>
build后：
頁面顯示：
方式五（ide警告，開發(fā)頁面正常,生產(chǎn)頁面報錯，img標簽src屬性綁定變量，變量賦值/public）：
<template>
<div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
const img = "/public/moon.png";
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>
ide警告：
build后：
頁面顯示：
上圖顯示正常是因為在開發(fā)環(huán)境，存在public路徑，但是如果部署服務(wù)器，就會找不到圖片如下圖，因為沒有public這個路徑，
方式六（ide警告，頁面正常，img標簽src屬性綁定變量，變量賦值../../public）：
<template>
<div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
const img = "../../public/moon.png";
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>
ide警告：
build后：
頁面顯示：
上圖顯示正常是因為在開發(fā)環(huán)境，存在public路徑，但是如果部署服務(wù)器，就會找不到圖片如下圖，因為沒有public這個路徑，
方式七（ide正常，頁面正常，import圖片，路徑為/）：
<template>
<div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
import img from "/moon.png";
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>build后：
頁面顯示：
方式八（ide警告，頁面正常，import圖片，路徑為/public）：
<template>
<div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
import img from "/public/moon.png";
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>
ide警告：
build后：
可以看到，這樣的方式引用，會把圖片文件復(fù)制一份，名稱追加hash值，，放在assets下面，根目錄下的moon.png并沒有被引用
頁面顯示：
方式九（ide警告，頁面正常，import圖片，路徑為../../public）：
<template>
<div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
import img from "../../public/moon.png";
console.log("aaa");
</script>
<style scoped>
img {
width: 300px;
height: 300px;
}
</style>
ide警告：
build后：
可以看到，這樣的方式引用，會把圖片文件復(fù)制一份，名稱追加hash值，，放在assets下面，根目錄下的moon.png并沒有被引用
頁面顯示：
2.2 json文件
方式一（ide報錯，頁面報錯，無法使用，import引入）：
<template>
{{ data }}
</template>
<script setup lang="ts">
import data from "/data.json";
console.log("aaa", data);
</script>
<style scoped></style>
ide報錯：
頁面報錯：
方式二（頁面正常，import引入，增加?url參數(shù)）：
<template>
{{ data }}
</template>
<script setup lang="ts">
import data from "/data.json?url";
console.log("aaa", data);
</script>
<style scoped></style>
build后：
頁面顯示：
可以看到頁面僅僅顯示路徑，而不是文件內(nèi)容
方式三（ide警告，頁面正常，import引入,路徑增加/public）：
<template>
{{ data }}
</template>
<script setup lang="ts">
import data from "/public/data.json";
console.log("aaa", data);
</script>
<style scoped></style>
ide警告：
"vue-tsc && vite build"命令build報錯：
"vite build"命令build后:
可以看到，雖然有警告，但是/public中的json文件，在vue組件中用import { test } from '/public/data.json' 方式引入后還是可以使用的,但是json文件內(nèi)容已經(jīng)被引入到當(dāng)前js中了，實際上刪除打包后根目錄中的data.json也不會影響
頁面正常：
方式四（ide警告，頁面正常，import引入,路徑增加../../public相對路徑）：
<template>
{{ data }}
</template>
<script setup lang="ts">
import data from "../../public/data.json";
console.log("aaa", data);
</script>
<style scoped></style>ide警告：
build后:
頁面顯示：
2.3 js文件
方式一（報錯，無法使用，import引入）：
<template>
{{ test }}
</template>
<script setup lang="ts">
import {test} from "/test.js";
console.log("aaa", test);
</script>
<style scoped></style>ide報錯：
頁面報錯：
方式二（ide警告，頁面正常，import引用，路徑加/public，絕對路徑）：
<template>
{{ test }}
</template>
<script setup lang="ts">
import {test} from "/public/test.js";
console.log("aaa", test);
</script>
<style scoped></style>
ide警告：
"vue-tsc && vite build"命令build報錯：
"vite build"命令build后:
可以看到，雖然有警告，但是/public中的js文件，在vue組件中用import { test } from '/public/test.js' 方式引入后還是可以使用的，但是js文件內(nèi)容已經(jīng)被引入到當(dāng)前js中了，test.js也不會影響
頁面顯示：
方式三（ide警告，頁面正常，import引用，路徑加../../public，相對路徑）：
<template>
{{ test }}
</template>
<script setup lang="ts">
import {test} from "../../public/test.js";
console.log("aaa", test);
</script>
<style scoped></style>
ide警告：
"vue-tsc && vite build"命令build報錯：
"vite build"命令build后:
可以看到，雖然有警告，但是/public中的js文件，在vue組件中用import { test } from '/public/test.js' 方式引入后還是可以使用的，但是js文件內(nèi)容已經(jīng)被引入到當(dāng)前js中了，test.js也不會影響
3 結(jié)論
綜上：
- 1,4,7是正確用法，
- 5,6,10,14是錯誤用法，
- 2,3,8,9可以使用，但是圖片會被復(fù)制到assets文件夾，重命名hash,違背放在/public的初衷，
- 11無法獲取文件內(nèi)容，
- 12,13,15,16可以使用，但是json和js會被復(fù)制到assets文件夾，重命名hash,違背放在/public的初衷
- 如果有一個json/js文件，含有大量數(shù)據(jù)，不會經(jīng)常變動，如果按照官網(wǎng)解釋，放在src中的assets文件夾中，build時候會被打包，并且hash命名，不符合我們本意，如果直接放在/public文件夾，只要在組件中引入，build時，就會自動復(fù)制到輸出目錄的/assets/文件夾中,并且hash命名（圖片）或者將其內(nèi)容打包到引用的js文件中（json,js），不符合我們本意，臨時的辦法是，在index.html中引入json/js文件,但是這樣是全局的
總結(jié)
到此這篇關(guān)于vue引用public文件夾中文件的多種方式的文章就介紹到這了,更多相關(guān)vue引用public文件夾文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)硪黄猇ue2.0 從零開始_環(huán)境搭建操作步驟。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Vue進行大屏開發(fā)的全流程及技術(shù)細節(jié)詳解
大屏數(shù)據(jù)可視化是指通過大尺寸顯示屏,如指揮中心,監(jiān)控中心,展覽中心等場景,將復(fù)雜的數(shù)據(jù)信息以圖形化方式展示的技術(shù)方案,下面小編就和大家詳細講講Vue大屏開發(fā)的全流程吧2026-01-01
vue3學(xué)習(xí)筆記簡單封裝axios示例實現(xiàn)
這篇文章主要為大家介紹了vue3學(xué)習(xí)筆記簡單封裝axios示例實現(xiàn)，2022-06-06
這篇文章主要介紹了vue實現(xiàn)多個數(shù)組合并方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
在本篇文章里小編給大家整理的是關(guān)于卸載vue2.0并升級vue_cli3.0的實例內(nèi)容，需要的朋友們可以學(xué)習(xí)參考下。2020-02-02
這篇文章主要介紹了vue 動態(tài)表單開發(fā)方法,結(jié)合具體案例形式詳細分析了vue.js動態(tài)表單相關(guān)原理、開發(fā)步驟與實現(xiàn)技巧,需要的朋友可以參考下2019-12-12
在VUE應(yīng)用中,經(jīng)常會使用一些非vue實現(xiàn)的js庫,這些js庫可能要求外部傳入一些界面DOM節(jié)點,本文主要介紹了手動掛載Vue3.0組件到DOM節(jié)點的方法,感興趣的可以了解一下2024-08-08
Vue3的Refs是一種新的API,用于訪問DOM元素或組件實例,這篇文章主要介紹了Vue3中Refs的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-06-06
這篇文章主要為大家詳細介紹了vue-draggable實現(xiàn)pc端拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這段文章介紹了如何在Vue項目中根據(jù)窗口尺寸動態(tài)設(shè)置元素寬度的方法,重點提及了vw單位、resize事件及@vueuse/core庫的應(yīng)用,適用于前端開發(fā)人員優(yōu)化布局適應(yīng)性屏幕2026-05-05