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后：
可以看到，這樣的方式引用，會把圖片文件復制一份，名稱追加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后：
可以看到，這樣的方式引用，會把圖片文件復制一份，名稱追加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路徑，但是如果部署服務器，就會找不到圖片如下圖，因為沒有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路徑，但是如果部署服務器，就會找不到圖片如下圖，因為沒有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后：
可以看到，這樣的方式引用，會把圖片文件復制一份，名稱追加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后：
可以看到，這樣的方式引用，會把圖片文件復制一份，名稱追加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)被引入到當前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)被引入到當前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)被引入到當前js中了，test.js也不會影響
3 結(jié)論
綜上：
- 1,4,7是正確用法，
- 5,6,10,14是錯誤用法，
- 2,3,8,9可以使用，但是圖片會被復制到assets文件夾，重命名hash,違背放在/public的初衷，
- 11無法獲取文件內(nèi)容，
- 12,13,15,16可以使用，但是json和js會被復制到assets文件夾，重命名hash,違背放在/public的初衷
- 如果有一個json/js文件，含有大量數(shù)據(jù)，不會經(jīng)常變動，如果按照官網(wǎng)解釋，放在src中的assets文件夾中，build時候會被打包，并且hash命名，不符合我們本意，如果直接放在/public文件夾，只要在組件中引入，build時，就會自動復制到輸出目錄的/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)文章
在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡請求的方法
這篇文章主要介紹了在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡請求的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
很多時候使用vue開發(fā)的項目,由于無法在低版本瀏覽器上運行,所以需要解決下,下面這篇文章主要給大家介紹了關(guān)于vue對于低版本瀏覽器兼容問題的解決思路,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue 判斷元素內(nèi)容是否超過寬度的方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在Vue中,可以使用多種方式來處理cookie和本地存儲,不同的方法還有不同的特點和適用場景,本文主要介紹了這些方法的對比和使用場景,希望對大家有所幫助2023-08-08
vue前端項目打包成Docker鏡像并運行的實現(xiàn)
這篇文章主要介紹了vue前端項目打包成Docker鏡像并運行的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
使用VUE+SpringBoot+EasyExcel?整合導入導出數(shù)據(jù)的教程詳解
這篇文章主要介紹了使用VUE+SpringBoot+EasyExcel?整合導入導出數(shù)據(jù)的過程詳解，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-05-05
Vue 針對瀏覽器參數(shù)過長實現(xiàn)瀏覽器參數(shù)加密解密的操作方法
文章介紹了如何在Vue項目中使用crypto-js庫對瀏覽器參數(shù)進行加密和解密,以解決參數(shù)過長的問題,在router/index.js中添加了相關(guān)代碼,并在utils工具類中添加了encryption.js和query.js源碼,感興趣的朋友一起看看吧2024-12-12
這篇文章主要介紹了vue遞歸組件的相關(guān)資料,遞歸組件是Vue.js中用于渲染層級結(jié)構(gòu)的強大工具,通過組件調(diào)用自身來簡化復雜數(shù)據(jù)的渲染,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-12-12
Vue3動態(tài)組件怎么進行異常處理？下面本篇文章帶大家聊聊Vue3 動態(tài)組件異常處理的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-02-02
Vue是目前Web前端最流行的開發(fā)框架技術(shù),?下面這篇文章主要給大家介紹了關(guān)于vue3組件化開發(fā)常用API的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06