如何构建可直接运行的Vue 3 Vite生产版本应用

Vite 初始化的项目默认生产构建使用绝对路径引用静态资源，直接通过 file:// 协议打开 dist/index.html 时，浏览器会从系统根目录查找JS、CSS等资源，资源加载失败自然导致页面空白。

• 修改项目根目录下的配置文件：JS项目为 vite.config.js，TS项目为 vite.config.ts，新增 base 配置项，将资源引用路径改为相对路径，配置示例：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 新增以下配置，使用相对路径引用资源
  base: './'
})

• 如果项目使用了 vue-router 做前端路由，还需要调整路由模式，否则直接打开文件时路由匹配失败也会白屏：
  找到路由配置文件（通常路径为 src/router/index.js 或 src/router/index.ts），将History路由模式替换为Hash模式，示例代码如下：

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  // 替换原来的createWebHistory写法
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    // 原有路由配置保持不变
  ]
})

export default router

• 清理旧的构建产物，删除之前生成的 dist 目录后重新执行构建命令：

npm run build

构建完成后直接双击打开 dist/index.html 即可正常运行，不需要额外启动任何本地服务。

补充说明：如果构建产物最终是部署到HTTP服务的非根路径下（例如部署到站点的 /my-vue-app/ 二级目录），只需要将 base 配置改为对应的路径前缀即可，不需要设置为相对路径；base: './' 的配置仅适用于需要本地直接双击打开HTML文件的场景。

内容的提问来源于stack exchange，提问作者Mishen Thakshana