快捷導(dǎo)航

Vue3刷新頁面報錯404的解決方法

更新時間：2022年04月21日 09:38:55 作者：SpongeBob

本文主要介紹了Vue3刷新頁面報錯404的解決方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vue-router歷史模式

最近在學(xué)習(xí)Vue3的過程中遇到了一個問題，那就是在寫代碼的過程中，每當(dāng)代碼發(fā)生了變動，頁面一刷新，原先的頁面就會變成這個樣子：

打開控制臺一看：

這時候刷新、在瀏覽器地址欄直接輸入地址也不管用。每次寫一點代碼，都不能及時看到結(jié)果，需要從8080重新進入才可以，其中的崩潰可想而知。此時判斷應(yīng)該是路由跳轉(zhuǎn)的問題，于是來到router.js文件看一看：

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

const Home = () => import('../views/home/Home');
const Category = () => import('../views/category/Category');
const Detail = () => import('../views/detail/Detail');
const Profile = () => import('../views/profile/Profile');
const Shopcart = () => import('../views/shopcart/Shopcart');


const routes = [{
    path: '/home',
    name: 'Home',
    component: Home,
    meta: {
      title: '圖書兄弟'
    }
  },
  {
    path: '/',
    name: 'Default',
    component: Home,
    meta: {
      title: '圖書兄弟'
    }
  },
  {
    path: '/category',
    name: 'Category',
    component: Category,
    meta: {
      title: '商品分類'
    }
  },
  {
    path: '/detail',
    name: 'Detail',
    component: Detail,
    meta: {
      title: '商品詳情'
    }
  },

  {
    path: '/profile',
    name: 'Profile',
    component: Profile,
    meta: {
      title: '個人中心'
    }
  },
  {
    path: '/shopcart',
    name: 'Shopcart',
    component: Shopcart,
    meta: {
      title: '購物車'
    }
  },
]

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


router.beforeEach((to, from, next) => {

  // 如果沒有登錄，到login
  next();
  document.title = to.meta.title;
})

export default router

感覺沒啥問題，仔細檢查了自己寫的代碼部分，沒有發(fā)現(xiàn)問題，于是更納悶了，難道是自動生成的代碼出現(xiàn)了問題？經(jīng)過一翻排查，發(fā)現(xiàn)原來是vue-router歷史模式的問題： vue3中歷史模式默認改為了HTML5模式：createWebHistory()

當(dāng)使用這種歷史模式時，URL 會看起來很 "正常"，例如 https://example.com/user/id。不過，問題來了。由于我們的應(yīng)用是一個單頁的客戶端應(yīng)用，如果沒有適當(dāng)?shù)姆?wù)器配置，用戶在瀏覽器中直接訪問 https://example.com/user/id，就會得到一個 404 錯誤。 這就是一直折磨我的罪魁禍首！

Vue-router官方給出的解決方案是：

要解決這個問題，你需要做的就是在你的服務(wù)器上添加一個簡單的回退路由。如果 URL 不匹配任何靜態(tài)資源，它應(yīng)提供與你的應(yīng)用程序中的 index.html 相同的頁面。

這涉及到服務(wù)器的配置，由于我的項目還在開發(fā)階段，所以這種解決方式暫時不能用。所幸還有其他的解決方案，那就是將歷史模式由當(dāng)前的HTML5模式改為Hash模式：

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

表現(xiàn)在代碼上就是兩個createWebHistory換成了createWebHashHistory，這樣就完成了修改。

修改完成后重新啟動項目：