项目场景:
Vite+Vue3.0+Vue-Router4.0 采用history 页面刷新白屏问题处理
问题描述:
最近使用Vue3.0 开发新项目,开始采用hash模式,但是不符合公司对url要求,于是改成history,但是刷新之后页面白屏。找了很多都说是要再nginx上修改配置,最后没有修改nginx配置,实现history模式导航
解决方案:
- 首先在Vue router的index中加入base,
import {
createRouter,
createWebHashHistory,
createWebHistory,
} from "vue-router";
import routes from "./routes";
import Cookies from "js-cookie";
//base 直接加在 createWebHistory 中
const routerHistory = createWebHistory('/h5/');
const router = createRouter({
history: routerHistory,
routes,
});
- 2.在vite.config.js 中设置 base,以及build之后的文件目录 (没有要求可以不用修改)
base: "/h5/", // 类似publicPath,'./'避免打包访问后空白页面,要加上,不然线上也访问不了
build: {
chunkSizeWarningLimit: 1000,
outDir: "dist",
// 9月更新
assetsDir: "assets", //指定静态资源存放路径
// assetsPublicPath:'',
sourcemap: true, //是否构建source map 文件
terserOptions: {
// 生产环境移除console
compress: {
drop_console: true,
drop_debugger: true,
},
},
完成这两步骤就大功告成。