vue3+vite打包后本地index.html打开白屏的问题

解决方案:

给该项目安装@vitejs/plugin-legacy

npm install @vitejs/plugin-legacy --save

1 、配置 Vite 打包路径为相对路径

配置 Vite 打包路径为相对路径
修改 vite.config.ts,添加 base 配置为相对路径(.):

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue(), legacy({
    targets: ["ie>=11"],
    additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
  })],
  base: './',
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // 关键配置
    }
  }
})

2、检查路由模式,在router/index.ts文件中,把createWebHistory改成createWebHashHistory

// router/index.ts
const router = createRouter({
  history: createWebHashHistory(), // 改为 hash 模式
  routes: [...],
});

今天周四,祝大家早点下班。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容