1 官方解釋

vite官網(wǎng)解釋

2 使用

可以先看最下面結(jié)論

在Test.vue組件中測(cè)試

2.1 圖片文件

方式一（ide正常，頁(yè)面正常，img標(biāo)簽src屬性賦值絕對(duì)路徑/）：

<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后：

頁(yè)面顯示：

方式二 （ide警告,頁(yè)面正常,img標(biāo)簽src屬性賦值絕對(duì)路徑/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后：

 可以看到，這樣的方式引用，會(huì)把圖片文件復(fù)制一份，名稱追加hash值，放在assets下面，根目錄下的moon.png并沒(méi)有被引用

頁(yè)面顯示：

方式三（ide警告，頁(yè)面正常，img標(biāo)簽src屬性賦值相對(duì)路徑../../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后：

可以看到，這樣的方式引用，會(huì)把圖片文件復(fù)制一份，名稱追加hash值，放在assets下面，根目錄下的moon.png并沒(méi)有被引用

頁(yè)面顯示：

方式四（ide正常，頁(yè)面正常，img標(biāo)簽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后：

頁(yè)面顯示：

方式五（ide警告，開(kāi)發(fā)頁(yè)面正常,生產(chǎn)頁(yè)面報(bào)錯(cuò)，img標(biāo)簽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后：

頁(yè)面顯示：

上圖顯示正常是因?yàn)樵陂_(kāi)發(fā)環(huán)境，存在public路徑，但是如果部署服務(wù)器，就會(huì)找不到圖片如下圖，因?yàn)闆](méi)有public這個(gè)路徑，

方式六（ide警告，頁(yè)面正常，img標(biāo)簽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后：

頁(yè)面顯示：

上圖顯示正常是因?yàn)樵陂_(kāi)發(fā)環(huán)境，存在public路徑，但是如果部署服務(wù)器，就會(huì)找不到圖片如下圖，因?yàn)闆](méi)有public這個(gè)路徑，

方式七（ide正常，頁(yè)面正常，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后：

頁(yè)面顯示：

方式八（ide警告，頁(yè)面正常，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后：

可以看到，這樣的方式引用，會(huì)把圖片文件復(fù)制一份，名稱追加hash值，，放在assets下面，根目錄下的moon.png并沒(méi)有被引用

頁(yè)面顯示：

方式九（ide警告，頁(yè)面正常，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后：

可以看到，這樣的方式引用，會(huì)把圖片文件復(fù)制一份，名稱追加hash值，，放在assets下面，根目錄下的moon.png并沒(méi)有被引用

頁(yè)面顯示：

2.2 json文件

方式一（ide報(bào)錯(cuò)，頁(yè)面報(bào)錯(cuò)，無(wú)法使用，import引入）：

<template>
  {{ data }}
</template>
<script setup lang="ts">
import data from "/data.json";
console.log("aaa", data);
</script>
<style scoped></style>
 

ide報(bào)錯(cuò)：

頁(yè)面報(bào)錯(cuò)：

方式二（頁(yè)面正常，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后：

頁(yè)面顯示：

可以看到頁(yè)面僅僅顯示路徑，而不是文件內(nèi)容

方式三（ide警告，頁(yè)面正常，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報(bào)錯(cuò)：

"vite build"命令build后:

可以看到，雖然有警告，但是/public中的json文件，在vue組件中用import { test } from '/public/data.json' 方式引入后還是可以使用的,但是json文件內(nèi)容已經(jīng)被引入到當(dāng)前js中了，實(shí)際上刪除打包后根目錄中的data.json也不會(huì)影響

頁(yè)面正常：

方式四（ide警告，頁(yè)面正常，import引入,路徑增加../../public相對(duì)路徑）：

<template>
  {{ data }}
</template>
<script setup lang="ts">
import data from "../../public/data.json";
console.log("aaa", data);
</script>
<style scoped></style>

ide警告：

build后:

頁(yè)面顯示：

2.3 js文件

方式一（報(bào)錯(cuò)，無(wú)法使用，import引入）：

<template>
  {{ test }}
</template>
<script setup lang="ts">
import {test} from "/test.js";
console.log("aaa", test);
</script>
<style scoped></style>

ide報(bào)錯(cuò)：

頁(yè)面報(bào)錯(cuò)：

方式二（ide警告，頁(yè)面正常，import引用，路徑加/public，絕對(duì)路徑）：

<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報(bào)錯(cuò)：

"vite build"命令build后: 

可以看到，雖然有警告，但是/public中的js文件，在vue組件中用import { test } from '/public/test.js' 方式引入后還是可以使用的，但是js文件內(nèi)容已經(jīng)被引入到當(dāng)前js中了，test.js也不會(huì)影響

頁(yè)面顯示：

方式三（ide警告，頁(yè)面正常，import引用，路徑加../../public，相對(duì)路徑）：

<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報(bào)錯(cuò)：

"vite build"命令build后: 

可以看到，雖然有警告，但是/public中的js文件，在vue組件中用import { test } from '/public/test.js' 方式引入后還是可以使用的，但是js文件內(nèi)容已經(jīng)被引入到當(dāng)前js中了，test.js也不會(huì)影響

3 結(jié)論

綜上：

• 1,4,7是正確用法，
• 5,6,10,14是錯(cuò)誤用法，
• 2,3,8,9可以使用，但是圖片會(huì)被復(fù)制到assets文件夾，重命名hash,違背放在/public的初衷，
• 11無(wú)法獲取文件內(nèi)容，
• 12,13,15,16可以使用，但是json和js會(huì)被復(fù)制到assets文件夾，重命名hash,違背放在/public的初衷
• 如果有一個(gè)json/js文件，含有大量數(shù)據(jù)，不會(huì)經(jīng)常變動(dòng)，如果按照官網(wǎng)解釋，放在src中的assets文件夾中，build時(shí)候會(huì)被打包，并且hash命名，不符合我們本意，如果直接放在/public文件夾，只要在組件中引入，build時(shí)，就會(huì)自動(dòng)復(fù)制到輸出目錄的/assets/文件夾中,并且hash命名（圖片）或者將其內(nèi)容打包到引用的js文件中（json,js），不符合我們本意，臨時(shí)的辦法是，在index.html中引入json/js文件,但是這樣是全局的

總結(jié)

到此這篇關(guān)于vue引用public文件夾中文件的多種方式的文章就介紹到這了,更多相關(guān)vue引用public文件夾文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論