Vue-cli3 学习笔记

一、 启动vue-cli3脚手架报错： doesn't work properly without JavaScript enabled. Please enable it to continue.

 

解决办法：多数出现在打包上线前，没有定义好环境变量，引发的相对的接口请求不到正确后端接口，在本地配置好环境变量，并配置好开发环境，转发的地址和上线之后的相对地址就可以了。

 

二、 webpack code spling：

常用的代码分离方法有三种：

• 入口起点：使用 entry 配置手动地分离代码。
• 防止重复：使用 SplitChunksPlugin 去重和分离 chunk。
• 动态导入：通过模块中的内联函数调用来分离代码。

文章指引： https://webpack.docschina.org/guides/code-splitting/

与 prefetch 指令相比，preload 指令有许多不同之处：

• preload chunk 会在父 chunk 加载时，以并行方式开始加载。prefetch chunk 会在父 chunk 加载结束后开始加载。
• preload chunk 具有中等优先级，并立即下载。prefetch chunk 在浏览器闲置时下载。
• preload chunk 会在父 chunk 中立即请求，用于当下时刻。prefetch chunk 会用于未来的某个时刻。
• 浏览器支持程度不同。

bundle 分析(bundle analysis) 

如果我们以分离代码作为开始，那么就应该以检查模块的输出结果作为结束，对其进行分析是很有用处的。官方提供分析工具 是一个好的初始选择。下面是一些可选择的社区支持(community-supported)工具：

• webpack-chart：webpack stats 可交互饼图。
• webpack-visualizer：可视化并分析你的 bundle，检查哪些模块占用空间，哪些可能是重复使用的。
• webpack-bundle-analyzer：一个 plugin 和 CLI 工具，它将 bundle 内容展示为便捷的、交互式、可缩放的树状图形式。
• webpack bundle optimize helper：此工具会分析你的 bundle，并为你提供可操作的改进措施建议，以减少 bundle 体积大小。

三、ValidationError: webpack Dev Server Invalid Options：

ESLint 可以通过 .eslintrc 或 package.json 中的 eslintConfig 字段进行配置。

通过 eslint-loader 在每次保存时执行校验的选项是默认开启的，你也可以通过 vue.config.js 中的 lintOnSave 选项将其关闭。

module.exports = {
  lintOnSave: false
}

　　

当设置为 true 时，eslint-loader 将会抛出校验错误作为警告。默认情况下警告只会记录在终端，并不会导致编译失败。

你可以使用 lineOnSave: 'error' 将校验错误显示在浏览器里的浮层中。这会强制 eslint-loader 总是抛出错误。这时也意味着校验错误会导致编译失败。

你也可以配置浮层同时展示警告和错误：

// vue.config.js
module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}

　　

当 lintOnSave 是 truthy 值时，eslint-loader 会被同时运用在开发环境和生产环境中。如果你在生产环境构建时禁用 eslint-loader，可以进行如下配置：

// vue.config.js
module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}