vue引用public文件夹中文件

1 官方解释

vue引用public文件夹中文件_第1张图片

vite官网解释

2 使用

可以先看最下面结论

vue引用public文件夹中文件_第2张图片

vue引用public文件夹中文件_第3张图片

在Test.vue组件中测试

2.1 图片文件

方式一(ide正常,页面正常,img标签src属性赋值绝对路径/):





build后:

vue引用public文件夹中文件_第4张图片

页面显示:

vue引用public文件夹中文件_第5张图片

方式二 (ide警告,页面正常,img标签src属性赋值绝对路径/public)




ide警告:

build后:

vue引用public文件夹中文件_第6张图片

 可以看到,这样的方式引用,会把图片文件复制一份,名称追加hash值,放在assets下面,根目录下的moon.png并没有被引用

vue引用public文件夹中文件_第7张图片

页面显示:

vue引用public文件夹中文件_第8张图片

方式三(ide警告,页面正常,img标签src属性赋值相对路径../../public):





ide警告:

build后:

vue引用public文件夹中文件_第9张图片

可以看到,这样的方式引用,会把图片文件复制一份,名称追加hash值,放在assets下面,根目录下的moon.png并没有被引用

vue引用public文件夹中文件_第10张图片

页面显示:

vue引用public文件夹中文件_第11张图片

方式四(ide正常,页面正常,img标签src属性绑定变量,变量赋值/):





build后:

vue引用public文件夹中文件_第12张图片

页面显示:

vue引用public文件夹中文件_第13张图片

方式五(ide警告,开发页面正常,生产页面报错,img标签src属性绑定变量,变量赋值/public):





ide警告:

build后:

vue引用public文件夹中文件_第14张图片

页面显示:

vue引用public文件夹中文件_第15张图片

上图显示正常是因为在开发环境,存在public路径,但是如果部署服务器,就会找不到图片如下图,因为没有public这个路径,

vue引用public文件夹中文件_第16张图片

方式六(ide警告,页面正常,img标签src属性绑定变量,变量赋值../../public):





ide警告:

vue引用public文件夹中文件_第17张图片

build后:

vue引用public文件夹中文件_第18张图片

页面显示:

vue引用public文件夹中文件_第19张图片

上图显示正常是因为在开发环境,存在public路径,但是如果部署服务器,就会找不到图片如下图,因为没有public这个路径,

vue引用public文件夹中文件_第20张图片

方式七(ide正常,页面正常,import图片,路径为/):




build后:

vue引用public文件夹中文件_第21张图片

页面显示:

vue引用public文件夹中文件_第22张图片

方式八(ide警告,页面正常,import图片,路径为/public):





ide警告:

build后:

vue引用public文件夹中文件_第23张图片

可以看到,这样的方式引用,会把图片文件复制一份,名称追加hash值,,放在assets下面,根目录下的moon.png并没有被引用

vue引用public文件夹中文件_第24张图片

页面显示:

vue引用public文件夹中文件_第25张图片

方式九(ide警告,页面正常,import图片,路径为../../public):





ide警告:

build后:

vue引用public文件夹中文件_第26张图片

可以看到,这样的方式引用,会把图片文件复制一份,名称追加hash值,,放在assets下面,根目录下的moon.png并没有被引用

vue引用public文件夹中文件_第27张图片

页面显示:

vue引用public文件夹中文件_第28张图片

2.2 json文件

vue引用public文件夹中文件_第29张图片

方式一(ide报错,页面报错,无法使用,import引入):





ide报错:

页面报错:

vue引用public文件夹中文件_第30张图片

方式二(页面正常,import引入,增加?url参数):





build后:

vue引用public文件夹中文件_第31张图片

页面显示:

vue引用public文件夹中文件_第32张图片

可以看到页面仅仅显示路径,而不是文件内容

方式三(ide警告,页面正常,import引入,路径增加/public):





ide警告:

"vue-tsc && vite build"命令build报错:

vue引用public文件夹中文件_第33张图片

"vite build"命令build后:

vue引用public文件夹中文件_第34张图片

可以看到,虽然有警告,但是/public中的json文件,在vue组件中用import { test } from '/public/data.json' 方式引入后还是可以使用的,但是json文件内容已经被引入到当前js中了,实际上删除打包后根目录中的data.json也不会影响

页面正常:

vue引用public文件夹中文件_第35张图片

方式四(ide警告,页面正常,import引入,路径增加../../public相对路径):




ide警告:

build后:

vue引用public文件夹中文件_第36张图片

页面显示:

vue引用public文件夹中文件_第37张图片

2.3 js文件

vue引用public文件夹中文件_第38张图片

方式一(报错,无法使用,import引入):




ide报错:

页面报错:

vue引用public文件夹中文件_第39张图片

方式二(ide警告,页面正常,import引用,路径加/public,绝对路径):





ide警告:

"vue-tsc && vite build"命令build报错:

vue引用public文件夹中文件_第40张图片

"vite build"命令build后: 

vue引用public文件夹中文件_第41张图片

可以看到,虽然有警告,但是/public中的js文件,在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的,但是js文件内容已经被引入到当前js中了,test.js也不会影响

页面显示:

vue引用public文件夹中文件_第42张图片

方式三(ide警告,页面正常,import引用,路径加../../public,相对路径):





ide警告:

"vue-tsc && vite build"命令build报错:

vue引用public文件夹中文件_第43张图片

"vite build"命令build后: 

vue引用public文件夹中文件_第44张图片

可以看到,虽然有警告,但是/public中的js文件,在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的,但是js文件内容已经被引入到当前js中了,test.js也不会影响

3 结论

vue引用public文件夹中文件_第45张图片vue引用public文件夹中文件_第46张图片

综上:

  • 1,4,7是正确用法,
  • 5,6,10,14是错误用法,
  • 2,3,8,9可以使用,但是图片会被复制到assets文件夹,重命名hash,违背放在/public的初衷,
  • 11无法获取文件内容,
  • 12,13,15,16可以使用,但是json和js会被复制到assets文件夹,重命名hash,违背放在/public的初衷
  • 如果有一个json/js文件,含有大量数据,不会经常变动,如果按照官网解释,放在src中的assets文件夹中,build时候会被打包,并且hash命名,不符合我们本意,如果直接放在/public文件夹,只要在组件中引入,build时,就会自动复制到输出目录的/assets/文件夹中,并且hash命名(图片)或者将其内容打包到引用的js文件中(json,js),不符合我们本意,临时的办法是,在index.html中引入json/js文件,但是这样是全局的

你可能感兴趣的:(vue,vue.js,javascript,前端)