"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[278],{4731:(n,a,s)=>{s.r(a),s.d(a,{data:()=>t});const t={key:"v-7b96e3a4",path:"/guide/public.html",title:"静态资源",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:3,title:"在HTML模板中使用",slug:"在html模板中使用",children:[]},{level:3,title:"在.vue 和 js 文件中使用",slug:"在-vue-和-js-文件中使用",children:[]}],filePathRelative:"guide/public.md",git:{updatedTime:1654594164e3,contributors:[{name:"harrywan",email:"445436867@qq.com",commits:1}]}}},6430:(n,a,s)=>{s.r(a),s.d(a,{default:()=>p});const t=(0,s(6252).uE)('

静态资源

有些内容不需要经过 webpack 模块化处理，则可以将这些内容放在 public 文件夹，构建后会直接复制到 dist 目录，所以你需要通过BASE_URL来引入它们。

在HTML模板中使用

在 public/index.html 中需要设置：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">\n
1

在.vue 和 js 文件中使用

<template>\n  <img :src="`${publicPath}my-image.png`">\n</template>\n<script>\nexport default {\n  setup() {\n    return {\n      publicPath: process.env.BASE_URL\n    }\n  }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
',7),e={},p=(0,s(3744).Z)(e,[["render",function(n,a){return t}]])},3744:(n,a)=>{a.Z=(n,a)=>{const s=n.__vccOpts||n;for(const[n,t]of a)s[n]=t;return s}}}]);