vue打包后index.html直接打开空白(VIte+Vue3 打包在FIle本地index.html打开项目(不需要起服务))
导读:VIte+Vue3 打包在FIle本地 index.html 打开项目(不需要起服务)...
VIte+Vue3 打包在FIle本地 index.html 打开项目(不需要起服务)
参考原文链接:https://www.jianshu.com/p/41dc11b94c92 ,增加了一些问题处理 。
一 、安装插件
pnpm add @vitejs/plugin-legacy二 、配置 vite.config.js
import { defineConfig } from vite; import vue from @vitejs/plugin-vue; import legacy from @vitejs/plugin-legacy; export default defineConfig({ base:"./", plugins:[ vue(), legacy({ targets:["defaults","not IE 11"], }) ] });三 、路由配置(可选)
如果你配置了路由 ,history 选 createWebHashHistory() 即可 。 import { createRouter, createWebHashHistory } from vue-router; const router = createRouter({ history: createWebHashHistory(), routes:[ //... ], }); export default router;四 、修改打包后的 index.html
配置完前三个以后 ,就可以进行打包了 。
下面的那两个报错 ,是因为缺少了插件 。 报错:Cannot find module @babel/preset-env 安装:pnpm add @babel/preset-env 报错:terser not found. Since Vite v3, terser has become an optional dependency. You need to install it. 安装:pnpm add terser打包完后在index.html文件里的 body元素的最后一行加入(必须是最后一行 ,不然不能在最后执行)
<script> (function (win) { // 获取页面所有的 <script > 标签对象 let scripts = document.getElementsByTagName(script) // 遍历标签 for(let i = 0; i < scripts.length; i++) { // 提取单个<script > 标签对象 let script = scripts[i] // 获取标签中的 src let url = script.getAttribute("src") // 获取标签中的 type let type = script.getAttribute("type") // 获取标签中的js代码 let scriptText = script.innerHTML // 如果有引用地址或者 type 属性 为 "module" 则代表该标签需要更改 if (url || type === "module") { // 创建一个新的标签对象 let tag=document.createElement(script); // 设置src的引入 tag.setAttribute(url,url); // 设置js代码 tag.innerHTML = scriptText // 删除原先的标签 script.remove() // 将标签添加到代码中 document.getElementsByTagName(head)[0].appendChild(tag) } } })(window) </script>全部都执行完 ,就可以使用了 。
创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!