【VUE】关于vue.config.js的小知识（二）

【VUE】关于vue.config.js的小知识（一）

• pages

类型：Object

默认值：undefined

如果是多页面构成的应用，打包的时候可以对pages进行配置。在实验project定义两个页面page1、page2，配置设置如下

module.exports = {
  pages: {
    page1: {
      // page 的入口
      entry: 'src/page1/main.js',
      // 模板来源
      template: 'public/page1.html',
      // 在 dist/page1.html 的输出
      filename: 'page1.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page1',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      // page1是这个page的块，名字是当前模块定义对象的key
      chunks: ['chunk-vendors', 'chunk-common', 'page1']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/page2.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `page2.html`。
    page2: 'src/page2/main.js'
  }
}

打出来的包如下

延伸：什么是单页和多页？两者有啥优缺点呢？

单页面：简单理解就是只有一个html，当首次加载页面的时候所有的资源都加载成功的时候页面才展示。当页面实现跳转时，主要是通过JS加载数据然后跳转到相应的组件模块，因为html已经在首屏的时候已经加载好了。
多页面：多个单页面组合而成的多页面。首次加载的时候只加载一个也页面的资源，页面跳转的时候会加载相应的html和JS渲染页面。

优缺点：
单页：页面之间切换流畅、首屏加载慢
多页：页面之间切换较慢、首屏加载快

• lintOnSave

类型：boolean | 'warning' | 'default' | 'error'

默认值：default

是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。一般地，通过vue-cli生成的项目都会有这个依赖的配置。

设置为 true 或 'warning' 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。在浏览器中可以在控制台看到错误。

准备一个HelloWorld.vue文件做测试，内容如下

设置vue.config.js文件

module.exports = {
  lintOnSave: true
}

当我们vue-cli-service serve启动项目后，将HelloWorld.vue中第12行注释放开，然后保存，命令行将会爆出如下提示，但是编译还是成功了

在浏览器F12调出开发者工具，可以看到如下错误

设置为'default'时，错误会输出在命令行并且导致编译失败，同时在开发时会直接显示在浏览器中。

设置vue.config.js文件

module.exports = {
  lintOnSave: 'default'
}

启动应用后放开HelloWorld.vue中第12行注释，命令行会报错，并且此次编译失败了

同时浏览器中也会显示错误

设置为'error'时效果和'default'是差不多，只不过'error'也会将warnings输出，也就是说如果代码里有警告时也会导致编译失败，lint要求更严格。此时，如果也想把lint警告输出到浏览器上，可以这样设置：

module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}

当lintOnSave设值以后，eslint-loader 在开发和生产构建下都会被启用。如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置：

module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}

• runtimeCompiler

类型：boolean

默认值：false

是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。

首先我们不设置runtimeCompiler，默认的为false

module.exports = {
}

修改src/main.js

import Vue from 'vue'

Vue.config.productionTip = false

// 需要编译器
// new Vue({
//   template: '<div>test</div>'
// }).$mount('#app')

// 不需要编译器
new Vue({
  render (h) {
    return h('div')
  }
}).$mount('#app')

vue-cli-service serve可以正常启动应用，并且页面成功注入了div

将需要编译器的代码放开、注释不需要编译的代码，保存后浏览器的控制台会爆出如下警告

并且页面也不会渲染出<div>test</div>元素
设置runtimeCompiler为true再看看结果

页面成功渲染了<div>test</div>元素

此外，如果设置runtimeCompiler为true，打好的包会比false时要大30%左右。

未完待续

蜗牛速度般的学习，慢牛般的成长^-

更多文章欢迎关注“三横兰”