Vue+Vite项目打包后直接打开index.html空白，需适配移动端嵌入

问题根源 #

Vite默认打包生成的资源路径为绝对路径，直接本地打开index.html时，浏览器会以本地文件系统路径加载资源，导致资源找不到；而npm run preview通过本地服务器运行，使用服务器路径所以能正常访问。

修复方案 #

1. 配置相对路径base #

在vite.config.js中添加base: './'，将所有资源路径改为相对路径：

import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { vueI18n } from "@intlify/vite-plugin-vue-i18n";
import checker from "vite-plugin-checker";
import { viteSingleFile } from "vite-plugin-singlefile"

export default defineConfig({
  base: './', // 添加该行，设置资源相对路径
  plugins: [
    checker({ typescript: true }),
    vue(),
    viteSingleFile(),
    vueI18n({
      include: path.resolve(__dirname, "./src/locales/**"),
    }),
  ],
});

2. 优化viteSingleFile插件配置（可选） #

若使用vite-plugin-singlefile后仍有资源加载问题，可调整插件的内联规则，确保所有必要资源被打包进单个index.html：

viteSingleFile({
  inlinePattern: ['**/*.js', '**/*.css', '**/*.svg', '**/*.png']
})

3. 调整Vue Router模式（若使用路由） #

如果项目用了Vue Router，默认的history模式在本地文件系统下会失效，需改为hash模式：

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(), // 切换为hash模式
  routes: [/* 你的路由配置 */]
})

参考内容翻译 #

你提到的React+Vite项目相关讨论内容翻译如下：

要让打包后的项目能通过本地文件直接打开，核心是设置base: './'。React项目的@vitejs/plugin-react-swc插件默认对相对路径的适配性更好，但Vue项目需要显式配置base参数。另外要确保路由使用hash模式，避免HTML5 history模式在本地文件系统下的路径问题。

内容的提问来源于stack exchange，提问作者Baymax Hiro