理解默认Vue CLI构建的局限性
当使用vue cli（无论是vue 2还是vue 3）构建项目时，默认情况下会生成一个dist目录。该目录通常包含一个index.html文件、javascript文件（通常是按需加载的代码块，即chunk）、css文件以及其他静态资源。这种构建方式是为web服务器环境设计的。
其核心问题在于：
- 资源路径问题：index.html文件中引用的JavaScript和CSS文件路径通常是相对路径（例如/js/app.js）或基于根目录的绝对路径。当通过file://协议直接在浏览器中打开index.html时，浏览器会尝试从文件系统的根目录查找这些资源，而不是从index.html所在的目录，导致资源加载失败。
- HTTP请求假设：现代前端框架（包括Vue）的构建工具链（如Webpack）在处理模块依赖和代码分割时，默认假设这些资源会通过HTTP(S)请求从服务器加载。直接通过file://协议打开HTML文件时，浏览器对本地文件的安全限制以及对异步资源加载方式的支持与HTTP环境存在差异，可能导致脚本无法正确执行或资源加载失败，最终表现为页面空白。
因此，直接将dist目录下的index.html拖到浏览器中或双击打开，在无服务器环境下通常无法正常运行。
解决方案：构建单文件HTML应用
为了实现在无服务器、无网络连接的本地设备（如平板电脑）上运行Vue应用，我们需要将所有必要的HTML、CSS和JavaScript代码打包成一个独立的、自包含的HTML文件。这意味着所有的JavaScript和CSS都将被内联到index.html中，而不是作为外部文件引用。
实现这一目标的关键在于修改Vue CLI底层的Webpack配置。
立即学习“前端免费学习笔记（深入）”；
步骤一：配置 vue.config.js
在项目的根目录下创建或修改vue.config.js文件。以下是一个示例配置，旨在禁用代码分割、禁用CSS提取，并为资源内联做好准备：
// vue.config.js
const InlineSourceWebpackPlugin = require('inline-source-webpack-plugin'); // 需要安装此插件
module.exports = {
// 1. 设置公共路径为相对路径，确保资源引用正确
// 对于完全内联的单文件，publicPath的影响会减小，但仍建议设置为 './'
publicPath: './',
// 2. 禁用CSS提取，使其内联到HTML中
// 默认情况下，Vue CLI会将CSS提取到单独的文件中。
// 设置为 false 会强制CSS以