vue引用public文件夹中文件的多种方式

目录

• 1 官方解释
• 2 使用
• 2.1 图片文件
• 方式一（ide正常，页面正常，img标签src属性赋值绝对路径/）：
• 方式二 （ide警告,页面正常,img标签src属性赋值绝对路径/public）
• 方式三（ide警告，页面正常，img标签src属性赋值相对路径../../public）：
• 方式四（ide正常，页面正常，img标签src属性绑定变量，变量赋值/）：
• 方式五（ide警告，开发页面正常,生产页面报错，img标签src属性绑定变量，变量赋值/public）：
• 方式六（ide警告，页面正常，img标签src属性绑定变量，变量赋值../../public）：
• 方式七（ide正常，页面正常，import图片，路径为/）：
• 方式八（ide警告，页面正常，import图片，路径为/public）：
• 方式九（ide警告，页面正常，import图片，路径为../../public）：
• 2.2 json文件
• 方式一（ide报错，页面报错，无法使用，import引入）：
• 方式二（页面正常，import引入，增加?url参数）：
• 方式三（ide警告，页面正常，import引入,路径增加/public）：
• 方式四（ide警告，页面正常，import引入,路径增加../../public相对路径）：
• 2.3 js文件
• 方式一（报错，无法使用，import引入）：
• 方式二（ide警告，页面正常，import引用，路径加/public，绝对路径）：
• 方式三（ide警告，页面正常，import引用，路径加../../public，相对路径）：
• 3 结论
• 总结

<template>
  <div class="view"><img src="" /></div>
</template>
<script setup lang="ts">
console.log("aaa");
</script>
<style scoped>
img {
  width: 300px;
  height: 300px;
}
</style>
 

<template>
  <div class="view"><img src="" /></div>
</template>
<script setup lang="ts">
console.log("aaa");
</script>
<style scoped>
img {
  width: 300px;
  height: 300px;
}
</style>

<template>
  <div class="view"><img src="" /></div>
</template>
<script setup lang="ts">
console.log("aaa");
</script>
<style scoped>
img {
  width: 300px;
  height: 300px;
}
</style>
 

<template>
  <div class="view">
    <img :src="img" />
  </div>
</template>
<script setup lang="ts">
const img = "";
 
console.log("aaa");
</script>
<style scoped>
img {
  width: 300px;
  height: 300px;
}
</style>
 

<template>
  <div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
const img = "";
console.log("aaa");
</script>
<style scoped>
img {
  width: 300px;
  height: 300px;
}
</style>
 

<template>
  <div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
const img = "";
console.log("aaa");
</script>
<style scoped>
img {
  width: 300px;
  height: 300px;
}
</style>
 

<template>
  <div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
import img from "";
console.log("aaa");
</script>
<style scoped>
img {
  width: 300px;
  height: 300px;
}
</style>

<template>
  <div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
import img from "";
console.log("aaa");
</script>
<style scoped>
img {
  width: 300px;
  height: 300px;
}
</style>
 

<template>
  <div class="view"><img :src="img" /></div>
</template>
<script setup lang="ts">
import img from "";
console.log("aaa");
</script>
<style scoped>
img {
  width: 300px;
  height: 300px;
}
</style>
 

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

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

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

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

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

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

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