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 文件。
看！
打完包只有一个html文件，而且贼大！因为数据都塞这里面了，就不需要读取其他文件而产生错误了！
当然 vite.svg 是因为塞不进去这个格式好像。
双击index.html是可以直接在浏览器打开的哟！
好了！就到这儿。希望对大家有点用处！