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>