# vite + vue3 实现打包后 dist 文件夹可以直接打开 html 文件预览

news/2025/9/26 4:05:30/文章来源:https://www.cnblogs.com/wjw1014/p/19112406

vite + vue3 实现打包后 dist 文件夹可以直接打开 html 文件预览

问题

为什么突然写这么一篇文章，首先，自己用vite+vue写了点静态页面，需要给客户看页面效果，但是我打包之后将 dist 发送给客户后，客户没有通过nginx等三方服务部署，直接打开html文件页面是空白的。

在这里插入图片描述

双击打开效果：

在这里插入图片描述

控制台直接爆出了问题。

解决

一半这种情况下，有两种解决方法，

第一种就是通过第三方服务部署一下，比如nginx。
第二种就是把自己的浏览器安全策略关了，但是别人还是打不开。

接下来说第三种嗷！！！

他报错不是因为 index.html 调用其他文件出的问题嘛，那就把所有的 js、css 、甚至图片全部打包进 index.html 不就可以啦嘛！

步骤

第一步，修改路由

首先将路由改成hash模式：

在这里插入图片描述

代码我也贴一下哈：

// 创建路由实例，使用hash模式
const router = createRouter({history: createWebHashHistory(), // 使用hash模式routes
})

第二步，修改打包配置

这个要修改 vite.config.js 文件，在 export default defineConfig 中添加下面这段，我也不知道啥意思，照着抄就行：

  base: './', build: {assetsDir: '', rollupOptions: {output: {manualChunks: undefined, entryFileNames: 'index.js',assetFileNames: '[name].[ext]'}},polyfillModulePreload: false},

第三步，将项目中的绝对路径改成相对路径

比如下面我这样：

在这里插入图片描述

不过说实在话，在实际开发，也很少设置绝对路径吧？

第四步，安装一个插件 `vite-plugin-singlefile`

下面是我安装的版本：

在这里插入图片描述

这个插件是干嘛用的哈。vite-plugin-singlefile是一个 Vite 构建插件，它的主要作用是将所有的 JavaScript 和 CSS 资源直接内联到最终的dist/index.html文件中，把整个 Web 应用嵌入并分发为一个单一的 HTML 文件。

安装完成后需要在vite.config.js 文件中使用：

在这里插入图片描述

贴一下代码哈：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { viteSingleFile } from 'vite-plugin-singlefile'export default defineConfig({plugins: [vue(), viteSingleFile()],// ....})

完成！然后直接npm run build 打包！！

如果顺利的话，打包完成之后，就只有一个 index.html 文件。

看！

在这里插入图片描述