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

vue3 使用 vite 构建的项目打包后无法访问

解决办法:
1、安装 @vitejs/plugin-legacy -D

npm i @vitejs/plugin-legacy -D

2、vite.config.js 添加配置

import legacy from '@vitejs/plugin-legacy';
export default defineConfig({plugins: [legacy({targets: ['defaults', 'not IE 11']}),vue(),],base:'./', // https://cn.vitejs.dev/config/shared-options.html#base
})

3、将路由模式换成 hash 路由

import { createRouter, createWebHashHistory } from 'vue-router'

再次打包访问,如果还是不行的话就在打包完成后的 index.html 文件的末尾加上以下代码

<script>(function (win) {let src = document.getElementsByTagName('script');for(let i = 0; i < src.length; i++) {let script = src[i];let url = script.getAttribute("src");let type = script.getAttribute("type");let scriptText = script.innerHTML;if (url || type === "module") {let tag=document.createElement('script');tag.setAttribute('url',url);tag.innerHTML = scriptText;script.remove();document.getElementsByTagName('head')[0].appendChild(tag);}}})(window)
</script>
http://www.lryc.cn/news/168652.html

相关文章:

  • C语言指针详解(4)———找工作必看指针笔试题汇总
  • 03MyBatis-Plus中的常用注解
  • Android 修复在 Settings 首页,按键盘方向键逐个单选
  • SpringMvc第六战-【SpringMvcJSON返回异常处理机制】
  • idea-Tabnine
  • 联通面试题
  • [计组03]进程详解2
  • 使用redis+lua通过原子减解决超卖问题【示例】
  • WebFlux异常处理:onErrorReturn和onErrorResume
  • 《动手学深度学习 Pytorch版》 4.5 权重衰减
  • 数据脱敏的风险量化评估介绍
  • SpringCloudGateway网关实战(三)
  • 08在MyBatis-Plus中配置多数据源
  • Centos8安装docker并配置Kali Linux图形化界面
  • 游戏开发初等数学基础
  • svg图片代码data:image/svg+xml转png图片方法
  • 解决问题:Replace `‘vue‘;⏎` with `“vue“;`
  • ThinkPHP 5.0通过composer升级到5.1,超级简单
  • 计算机竞赛 多目标跟踪算法 实时检测 - opencv 深度学习 机器视觉
  • 一文了解大模型工作原理——以ChatGPT为例
  • CPP-Templates-2nd--第十九章 萃取的实现 19.7---
  • python 采用selenium+cookies 获取登录后的网页
  • 【测试开发】答疑篇 · 什么是软件测试
  • 深入解析顺序表:揭开数据结构的奥秘,掌握顺序表的精髓
  • 数据风险量化评估方案
  • EasyAVFilter代码示例之将视频点播文件转码成HLS(m3u8+ts)视频点播格式
  • day-50 代码随想录算法训练营(19)动态规划 part 11
  • 自定义权限指令与防止连点指令
  • UE5、CesiumForUnreal实现瓦片坐标信息图层效果
  • PostgreSQL执行计划