2. HTML 和静态资源 – Vue CLI

package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

翻译为一块代码或插件，可以让旧浏览器兼容新语法，默认情况会根据browserslist 配置来决定项目需要的 polyfill

为了兼容老浏览器，经过babel编译后的代码十分臃肿，而最新版本的浏览器已经支持了es6，所以你需要一个现代版的包，用下面的命令

vue-cli-service build --modern

 

public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。所有客户端环境变量也可以直接使用。例如，BASE_URL 的用法：

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

 

预先加载，<link rel=”preload”> 是一种 resource hint，可以指定一些资源在页面渲染完成之前提前加载，这些提示会被 @vue/preload-webpack-plugin 注入

也是一种 resource hint，页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。

可以通过 chainWebpack 的 config.plugin(‘prefetch’) 进行修改和删除。

Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。例如：

pages: {
    admin: {
      entry: 'src/client.js',
      template: 'public/client.html',
      filename: 'client.html'
    },
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },

 

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

所有 <img src=”…”>、background: url(…) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

所以，url(./image.png) 会被翻译为 require(‘./image.png’)，假设一个页面有100张图片，文件大小不一，为了减少请求数，我们可以设置一个值来决定小于这个值的文件都会放到一起请求。代码如下：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .use('url-loader')
          .loader('url-loader')
          .tap(options => Object.assign(options, { limit: 10240 }))
  }
}

 

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

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

在模板中使用base_url

<img :src="`${publicPath}my-image.png`">
...
data () {
  return {
    publicPath: process.env.BASE_URL
  }
}