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
是可以直接在浏览器打开的哟!
好了!就到这儿。希望对大家有点用处!