欢迎关注我的公众号《人生代码》

Importing Asset as URL

导入静态资产时，将返回解析后的公共URL:

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

例如，在开发阶段，imgUrl将是/img.png，而在生产版本中，它将变成/assets/img.2d8efhg.png。

其行为类似于webpack的文件加载器。区别在于导入既可以使用绝对公共路径(基于开发期间的项目根路径)，也可以使用相对路径。

CSS中的url()引用也以同样的方式处理。

如果使用Vue插件，Vue SFC模板中的资产引用将自动转换为导入。

常见的图像、媒体和字体文件类型被自动检测为资产。您可以使用assetsInclude选项扩展内部列表。

引用的资产作为构建资产图的一部分包括在内，将得到散列文件名，并可以由插件进行处理以进行优化。

字节数小于assetsInlineLimit选项的资产将内联为base64数据url。

Explicit URL Imports

没有包含在内部列表或assetsInclude中的资产，可以使用? URL后缀作为URL显式导入。这是有用的，例如，import Houdini Paint Worklets

import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)

Importing Asset as String

资源可以使用?raw后缀作为字符串导入。

import shaderString from './shader.glsl?raw'

Importing Script as a Worker

脚本可以作为带有?worker后缀的web worker导入。

// Separate chunk in the production build
import Worker from './shader.js?worker'
const worker = new Worker()

// Inlined as base64 strings
import InlineWorker from './shader.js?worker&inline'

The public Directory

如果你有以下资产:

从未在源代码中引用过(例如robots.txt)

必须保留完全相同的文件名(没有哈希)

…或者您只是不想为了获取URL而首先导入资产

然后，您可以将资产放置在项目根目录下的特殊公共目录中。在开发过程中，这个目录中的资源将在根路径/中提供，并原样复制到dist目录的根目录中。

该目录默认为/public，但可以通过publicDir选项配置。

注意:

你应该总是使用根目录绝对路径来引用公共资产——例如，public/icon.png在源代码中应该被引用为/icon.png。

公共的资产不能从JavaScript中导入。