vue-cli3高效构建大型单页应用指南：history模式与webpack优化

本文档主要介绍了在Vue CLI 3中构建大型单页面应用的方法。首先，通过在目标文件夹内执行`vue ui`命令，用户可以创建一个新的Vue项目，并利用Vue CLI提供的交互式界面进行初始化。创建项目后，重点在于配置`router`，选择合适的路由模式，推荐使用`history`模式，因为它在处理内嵌H5页面时更为灵活，但需要注意，部署到支持`history`模式的服务器时可能需要额外的Nginx配置。 在项目的`router/index.js`中，创建一个新的Vue Router实例，设置`base`属性为`'/'`，并配置`mode`为`'history'`，这有助于实现无hash路径。对于那些不允许URL包含`#`的应用，`history`模式更为合适，因为它能提供更友好的URL结构。 接着，文档指导读者在根目录下新建`vue.config.js`文件，这是一个用于自定义Webpack配置的钩子，可以通过它来调整开发服务器行为，比如禁止ESLint实时检查（`lintOnSave: false`），启用自动打开浏览器功能（`open: true`），以及配置全局依赖注入（使用`ProvidePlugin`）。此外，还可以通过`chainWebpack`方法对Webpack配置进行更深入的定制，例如控制代码分割和分析性能。 在启动项目时，使用`npm run serve`命令，会生成两个关键的JavaScript文件：`app.js`和`vendors.js`。`app.js`包含了所有单页面应用的初始渲染所需的代码，而`vendors.js`则合并了外部依赖库，确保应用的高效加载。 本文档提供了一套完整的Vue CLI 3构建大型单页面应用的流程，包括项目初始化、路由配置、Webpack优化和开发服务器设置，有助于开发者快速搭建高质量的单页应用。