Vue3项目无Web server/localhost环境如何在离线本地平板运行

直接打开build生成的dist/index.html出现白屏，核心是三个默认配置和file协议的冲突：

• 构建工具默认生成绝对路径的资源引用，file协议下会从磁盘根目录寻址，导致js、css资源全部加载失败
• History模式路由依赖服务端的路径重写规则，file协议下无法正常解析路由
• 部分浏览器对file协议下的ES模块、本地文件请求有安全拦截

方案1：零依赖直接打开（无需安装任何服务，拷入平板双击即可运行） #

按以下步骤修改配置后重新打包，生成的dist包可以在任意设备上直接双击index.html打开，完全不需要Web Server、不需要联网：

1. 修改构建公共路径为相对路径
   • 若使用Vite（Vue3官方默认构建工具），修改项目根目录下的vite.config.js/ts：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig({
     plugins: [vue()],
     base: './', // 核心配置：将资源引用改为相对路径
   })
   

   • 若使用Vue CLI（基于Webpack），修改项目根目录下的vue.config.js：

   module.exports = {
     publicPath: './', // 核心配置：将资源引用改为相对路径
   }
   

2. 将路由模式改为Hash模式
   打开路由配置文件，将原来的createWebHistory替换为createWebHashHistory，Hash模式的路由通过URL后的#标识路径，不依赖服务端解析：

   import { createRouter, createWebHashHistory } from 'vue-router'
   import routes from './routes' // 你自己的路由表配置
   
   const router = createRouter({
     history: createWebHashHistory(), // 替换原有的createWebHistory
     routes
   })
   
   export default router
   

3. 修正静态资源引用
   检查代码中所有以/开头的绝对路径资源引用（包括图片、字体、本地JSON配置文件等），全部改为相对路径引用，避免file协议下寻址失败。
4. 重新执行build命令打包：npm run build
   打包完成后先在本地电脑双击dist/index.html验证，确认可以正常打开、功能无异常后，将整个dist文件夹拷贝到平板，直接点击文件夹内的index.html即可离线运行。

注意：如果项目中有请求本地静态文件的逻辑，不要使用axios/fetch写绝对路径请求，直接将文件作为模块导入或使用相对路径引用，避免触发file协议的安全拦截。

方案2：本地轻量服务备选（适配部分对file协议限制严格的平板设备） #

如果完成上述配置后，部分老旧平板自带的浏览器仍然因为file协议安全限制无法正常打开，可以用平板本地的轻量服务方案，全程不需要连接互联网：

• 安卓平板：安装离线本地Web Server类应用（应用体积通常在10M以内），安装后无需联网，直接选择dist文件夹作为服务根目录，点击启动即可通过本地地址访问项目
• iPad：通过支持本地HTTP服务的文档类应用导入dist文件夹，开启应用自带的本地服务后即可访问，所有服务运行在平板本地，不需要公网连接。

内容的提问来源于stack exchange，提问作者Gökhan Akbaba