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

问题

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

双击打开效果：

控制台直接爆出了问题。

解决

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

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

接下来说第三种嗷！！！

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

步骤

第一步，修改路由

首先将路由改成hash模式：

代码我也贴一下哈：

javascript 复制代码

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

第二步，修改打包配置

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

javascript 复制代码

  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 文件中使用：

贴一下代码哈：

javascript 复制代码

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是可以直接在浏览器打开的哟！

好了！就到这儿。希望对大家有点用处！

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