vue3打包后页面空白解决方法

vue3打包后页面空白解决方法

    • 问题
    • 解决方法

问题

最近写一个小项目
没有打包的时候一切正常

技术栈用的vue3 + vite
我用的是npm创建的项目

npm init vue@latest

问题一 :打包后页面空白,什么都没有
vue3打包后页面空白解决方法_第1张图片
问题二:刷新页面后找不到资源
把url的index.html去掉后可以正常显示但是刷新后又会出现新的问题
问题如下
vue3打包后页面空白解决方法_第2张图片

解决方法

第一步
先在vite.config.js中添加一行代码

base:'/'

vue3打包后页面空白解决方法_第3张图片

第二步
在router/index.js中把createWebHistory 换成createWebHashHistory
这里默认是createWebHistory
vue3打包后页面空白解决方法_第4张图片
到此问题解决,打包测试应该没啥问题了!
vue3打包后页面空白解决方法_第5张图片

你可能感兴趣的:(前端,VUE,vue.js,vue,前端)