vue-cli4 vue3 build后白屏/无法使用路由的解决方法

最新推荐文章于 2025-09-13 08:48:45 发布

原创最新推荐文章于 2025-09-13 08:48:45 发布 · 2.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

在Vue3项目中遇到构建后index.html显示空白，且资源加载失败的问题。解决方法包括：调整vue.config.js的publicPath为'./'；针对路由问题，由于Vue3更改了路由创建方式，需将路由模式改为hash模式，通过import { createWebHashHistory }

build后的index.html是空白页面

使用vue-cli4脚手架工具后，vue项目结构发生了变化，许多以前的设置也改变了，最近在npm run build一个项目之后发现打开html是空白，点开控制台发现很多资源找不到。只需要改变vue.config.js文件中的publicPath即可，如图所示（直接改成 ./ 也可以）

打开页面无法使用路由

还是那个老问题，默认的路由模式是history模式，以前只需要注释掉路由配置文件中的mode: 'history'即可，现在倒好，路由长这个样子

添加一行mode: hash也无济于事，其实只是vue3中改变了路由创建模式，只需要修改import中的路由历史构建函数，选用hash模式即可

import {createRouter, createWebHashHistory} from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    }
]

const router = createRouter({
    history: createWebHashHistory(process.env.BASE_URL),
    routes
})

export default router

之后运行npm run build，在dist文件中查看生成页面，打开就可以正常运行了