2. HTML 和静态资源 – Vue CLI

浏览器兼容性

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

Polyfill

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

现代模式

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

 

HTML

public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中,资源链接会被自动注入。所有客户端环境变量也可以直接使用。例如,BASE_URL 的用法:
<link rel="icon" href="<%= BASE_URL %>favicon.ico">

 

Preload

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

Prefetch

也是一种 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转换规则

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

public 文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack。你需要通过绝对路径BASE_URL来引用它们。
在模板中使用base_url
<img :src="`${publicPath}my-image.png`">
...
data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

 

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:76 次浏览