14-Vite静态资源引用原创

我们来继续的学习VTE的功能。这一章，我们来学习weight中静态资源是如何处理的。何谓静态资源呢？像图片、CSSJS都算是静态资源，我们在前面已经学会了如何在V中去引入一个CSS，接下来呢，我们来看一下如何在wait中引入一个图片。回到我们的Vs code的。仍旧是打开wait basic view这个项目，在src里边我们有一个DSS的文件，下面呢，我们打算在这个文件里边去引入一张图片，然后在页面上显示出来。我们先把这个项目启动一下，我们先CD到V。Basic view，执行PN PM run。然后我们在浏览器上面打开它。接下来呢，我们来看一下如何在页面里头引入一张图片。

首先呢，我们来看一下图片的目标，我们打算去引入s RC set里边，原来这个项目里面有的一个logo.pg。这张图片呢，如果是我们想在页面上引入，我们得需要一个模块导入的方法，比如我们可以通过import，这里呢我们起名为logo，然后from路径的话呢，就是我们当前目录下面的sets下面的logo.png注意这里边呢，我们把这个PG当成是一个模块来导入了。那接下来我们看看这个logo现在是什么内容，其实这个logo呢，就是一个字符串，我们先保存一下，然后我们在下面呢，去看log一下logo，保存好我们打开控制台。好，大家看到这就打印出来我们当前的这个图片的URL路径，那接下来呢，我们依据这个就可以在页面上去引入一张图片了，我们写入一个GS的语法，我们的路径的内容就是logo保存一下，好大家看到现在呢，这张图片就给引入进来了。

通过刚才的图片资源的引入，我们发现其实事实上呢，就是使用的这种问号URL默认的一种方式，也就是说这里边引入的这个logo，其实事实上就是这个图片的URL，其实我们也可以在拼音机的后面加上一个问号URL，保存一下，好我们再去刷新一下页面，我发现呢，效果是一样的，也就是说默认情况下呢，这个logo就是代表了我们当前这个图片的URL，其实除了URL以外，我们还可以添加其他的一些参数，比方说我们在后面呢，可以注意问号RARA顾名思义就是原生的，也就是原始的代码。我们现在呢，再做个实验，把这个先注释掉，然后接下来呢，我们在当前的这个文件里边再导入一个，比方说men.js，我们可以写一个men from当前目录下面的。

man.GS后边呢，我们加一个问号弱，好，接下来呢，我们来打印一下这个man，看一下是什么效果，保存好，我们在控制台上面来看一下，打印的呢，就是我们man.JS的一个原始的代码，那就说我们可以把任何的一个文件后边在导入模块的时候，注意问号wrong就可以导入到这个模块的具体的代码了，这个有没有用呢？在一般情况下我们可能都用不上，那有时候呢，我们在特殊的需求下面，可以使用它来去导入我们这个文件的源代码。除了RA以外，我们还可以通过new URL来去产生一个ES模块的一个URL的引用。

其实这个new ul呢是浏览器原生支持的，我们可以通过import.ma.URL来完成一个URL的定义和返回，它与原生的URL构造器是结合在一起使用的。在我们一个JS模块里边，我们可以通过相对路径得到一个被完整解析的一个静态的URL，我们来做个实验。回到我们编辑器，在这里边呢，我们再次打算去引入我们这个view的logo，我们换一种引入方法，现在我们把这句话先注释掉，然后接下来呢，我们把这句话也注释掉。把这句也注释掉好，接下来呢，我们来去看一看如何去引入啊这样的一个模块，我们现在呢，先定一个常量，叫做img URL，它的值等于new UR，这个对象呢是浏览器可以直接支持它，但是得需要在现在的浏览器里边，那我们比如说再载入一下我们当前的assets目录下的logo.png后边呢，需要传入第二个参数就是import.met.url后边我们再加一个h re，那这个对象的h ref呢，就返回了我们这个图片的URL路径，那接下来呢，我们可以把这个logo改成image URL保存一下，好，我发现这个logo呢，照样能够被正常的引入进来。另外呢，我们也可以把引号里面的这个字符串改写为一个ES6的模板字符串都是可以的，也就是说我们可以在这里边使用变量。

最后我们再来介绍一个public目录，这个我们学习外派的时候呢，应该接触过它，在我们的weight里边呢，也有一个public目录，这个目录下面的资源我们可以直接在页面上进行引用。那一般情况下，我们什么时候可以使用到这个public目录呢？其实事实上就是不会被我们JS的源码来去引用的情况下，比方说我们在这里边放一个fair icon.ico文件，放一个robots.text文件，也就是可以给我们的爬虫去使用的，另外呢，我们还可以去保存一些没有哈希值的一些文件，也就是不需要啊，我们进行哈希转换的操作，也就是不需要缓存。

或者是呢，我们压根就不想引用这个资源，只是想得到一个URL，那我们就可以使用public目录下的资源了。我们下面呢来做个实验，举个例子，比方说我们在public下面创建一个新的文件，叫做style.css那么这个文件呢，我们是可以直接的在index.html里面去引用的，比方说我们在这下面呢，写一个link，然后我们去引入一下杠下的style.css也就是它的路径表示我们当前的public目录下的文件，好，我们保存一下，然后接下来呢，我们在这里面去写点样式，比方说我们写一个body，我们给它加个background color啊，加一个blue保存。

好，我们重新再启动一下我们的服务。好，大家看到现在呢，我们当前的页面的背景颜色就变成了蓝色，所以呢，我们这个style.css就被引用到了。但是大家要注意，我们不能在我们GSS里面去引用public这个目录下的内容，或者说试图通过杠来去引用是有问题的，我们可以实验一下，比方说我们在这儿去import一下这个style，然后from应该是杠啊，下载style.css好保存一下，你会发现呢，导入失败了。关于V处理静态资源呢，我们这一章就讲这么多，在后面呢，我们还会涉及到V如何去加载其他的静态资源，大家加油。