Vue页面切换空白与刷新404问题的深度解析

// 正确的路由懒加载写法
const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')
 
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

// 在用户可能访问前预加载
router.beforeResolve((to) => {
  if (to.name === 'Checkout') {
    import('./views/Checkout.vue')
  }
})

<template>
  <div>
    <div v-if="loading" class="skeleton-screen">
      <!-- 骨架屏内容 -->
    </div>
    <div v-else>
      <!-- 实际内容 -->
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      loading: true,
      data: null
    }
  },
  async created() {
    try {
      this.data = await this.fetchData()
    } finally {
      this.loading = false
    }
  }
}
</script>

<template>
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</template>
 
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

// vue.config.js 配置
module.exports = {
  chainWebpack: config => {
    // 分割代码
    config.optimization.splitChunks({
      chunks: 'all'
    })
  }
}

server {
  listen 80;
  server_name example.com;
  root /path/to/your/app;
  
  location / {
    try_files $uri $uri/ /index.html;
  }
}

const express = require('express')
const app = express()
const path = require('path')
 
// 静态文件服务
app.use(express.static(path.join(__dirname, 'dist')))
 
// 所有路由都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'))
})
 
app.listen(3000)

const router = new VueRouter({
  mode: 'hash', // 使用hash模式
  routes: [...]
})

// vue.config.js
module.exports = {
  devServer: {
    historyApiFallback: true // 开启history模式的 fallback
  }
}

const Home = () => import('./views/Home.vue')
  .catch(error => {
    console.error('组件加载失败:', error)
    // 可以返回一个错误组件
    return import('./views/Error.vue')
  })