URL转换规则以及public文件夹的应急配置使用法-技术精选-玖叶教程网

URL 转换规则

1.如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。

2.如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。

3.如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源：

<img src="~some-npm-package/foo.png">

4.如果 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 <projectRoot>/src 的别名 @。(仅作用于模版中)

public文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过webpack。你需要通过绝对路径来引用它们。

推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：

1.脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。

2.文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。

3.最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。

public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀：

1.在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过 <%= BASE_URL %> 设置链接前缀：

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

2.在模板中，你首先需要向你的组件传入基础 URL：

data () {
 return {
 publicPath: process.env.BASE_URL
 }
}

然后：

<img :src="`${publicPath}my-image.png`">

何时使用 public 文件夹?

1.你需要在构建输出中指定一个文件的名字。

2.你有上千个图片，需要动态引用它们的路径。

3.有些库可能和 webpack 不兼容，这时你除了将其用一个独立的 <script> 标签引入没有别的选择。

官方：https://cli.vuejs.org/zh/guide/html-and-static-assets.html#url-%E8%BD%AC%E6%8D%A2%E8%A7%84%E5%88%99

玖叶教程网