Vue CLI配置指南（2）HTML 和静态资源_vue-cli process html中使用

HTML

Index 文件

public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。
在构建过程中，资源链接会被自动注入。
另外，Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时) 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接。

Preload

<link rel=“preload”> 是一种 resource hint，用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload。

Prefetch

<link rel=“prefetch”> 是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。

处理静态资源

静态资源可以通过两种方式进行处理：

• 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。

• 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

从相对路径导入

当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如 <img src=“…”>、background: url(…) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

例如，url(./image.png) 会被翻译为 require(‘./image.png’)，而：

<img src="./image.png">
1

将会被编译到：

h('img', { attrs: { src: require('./image.png') }})
1

在其内部，我们通过 file-loader 用版本哈希值和正确的公共基础路径来决定最终的文件路径，再用 url-loader 将小于 4kb 的资源内联，以减少 HTTP 请求的数量。

你可以通过 chainWebpack 调整内联文件的大小限制。例如，下列代码会将其限制设置为 10kb：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .use('url-loader')
          .loader('url-loader')
          .tap(options => Object.assign(options, { limit: 10240 }))
  }
}
1
2
3
4
5
6
7
8
9
10

URL 转换规则

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

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

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

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

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

绝对路径：public 文件夹

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

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

1. 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
2. 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
3. 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。
4. public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀：

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

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

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

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}
1
2
3
4
5

然后

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

何时使用 public 文件夹

1. 你需要在构建输出中指定一个文件的名字。
2. 你有上千个图片，需要动态引用它们的路径。
3. 有些库可能和 webpack不兼容，这时你除了将其用一个独立的