当前位置: 首页 > news >正文

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

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

问题

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

在这里插入图片描述

双击打开效果:

在这里插入图片描述

控制台直接爆出了问题。

解决

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

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

接下来说第三种嗷!!!

他报错不是因为 index.html 调用其他文件出的问题嘛,那就把所有的 jscss 、甚至图片全部打包进 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 构建插件,它的主要作用是将所有的 JavaScriptCSS 资源直接内联到最终的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是可以直接在浏览器打开的哟!

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

http://www.hskmm.com/?act=detail&tid=17559

相关文章:

  • Python 在人工智能与机器学习中的地位与实践
  • 十八岁前开始远征
  • 课后作业二
  • 设置vscode的默认字符编码
  • adb.exe: more than one device/emulator 杀掉旧的adb进程
  • Codeforces Round 1054 (Div. 3)
  • Python 在自动化与运维中的价值与实践
  • redis 哨兵模式主从数据同步失败
  • 悲观锁,乐观锁和redis分布式锁
  • sql练习笔记
  • 算法练习
  • 数据库基础
  • 【System Beats!】第三章 程序的机器级表示
  • 苍穹外卖-day06(HttpClient) - a
  • Python 虚拟环境管理-学习笔记分享
  • 元人文AI的领域化部署:从哲学构想到实践应用的完整路径
  • 做题记录3
  • oucaiclub_cheapter1
  • navicat
  • 20250925 之所思 - 人生如梦
  • 在CodeBolcks下wxSmith的C++编程教程——在屏幕上绘图和保存绘图
  • 苍穹外卖-day07(缓存菜品,缓存套餐,添加购物车,查看购物车,清空购物车) - a
  • 一次CPU飙升问题排查定位
  • ros2 control 2
  • 基于洞察的智能编程法——从直觉到代码的原型炼成术
  • lc1036-逃离大迷宫
  • 9.25学习笔记
  • 新学期每日总结(第4天)
  • VSCode 升级 C++支持版本
  • 第四天