Vue.js生产环境刷新/直接访问商品详情页报404求助

问题本质 #

你遇到的是Vue Router history模式的典型问题：

• 本地开发时，vue-cli自带的devServer已经处理了前端路由的 fallback 规则，不管刷新还是直接访问路由路径，都会指向index.html，所以没问题。
• 生产环境用Apache服务器时，服务器会把/product/xxx这类路径当成真实的文件/目录去查找，找不到就返回404；而点击跳转是前端路由的内部跳转，不会发起新的服务器请求，所以正常。

你的.htaccess为什么能解决404 #

这段配置的核心作用是让Apache把所有非真实文件/目录的请求，都转发到index.html，交给Vue Router处理路由：

1. 关闭MultiViews，避免Apache自动匹配文件
2. 开启URL重写引擎，设置根目录为基准路径
3. 排除index.html本身的重写
4. 判断请求的不是真实文件（!-f）和真实目录（!-d）时，将所有请求重定向到index.html

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

解决"首页短暂显示"的问题 #

这个现象是因为刷新/直接访问详情页时，浏览器先加载index.html的初始DOM（也就是首页的基础结构），之后Vue Router才解析URL、渲染对应的详情页组件。可以通过以下方式优化：

1. 添加路由加载状态占位 #

在App.vue中加入加载状态，直到路由组件渲染完成：

<template>
  <div id="app">
    <!-- 加载占位，可替换为骨架屏/动画 -->
    <div v-if="isLoading" class="loading-wrap">
      <span>加载中...</span>
    </div>
    <router-view v-else />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    // 首屏加载完成后关闭加载状态
    this.isLoading = false
  },
  watch: {
    // 路由切换时重新显示加载状态
    $route() {
      this.isLoading = true
      // 延迟关闭，确保组件渲染完成（可根据实际调整时长）
      setTimeout(() => {
        this.isLoading = false
      }, 100)
    }
  }
}
</script>

<style scoped>
.loading-wrap {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
</style>

2. 优化打包与路由懒加载 #

• 路由组件懒加载：把详情页组件改为懒加载，减少首屏打包体积，加快加载速度：

// router/index.js
const ProductDetail = () => import('../views/ProductDetail.vue')

const routes = [
  {
    path: '/product/:id',
    name: 'ProductDetail',
    component: ProductDetail
  }
]

• 开启gzip压缩：在vue.config.js中配置压缩，减小打包文件的体积：

// vue.config.js
const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css$/,
        threshold: 8192, // 超过8k的文件才压缩
        minRatio: 0.8
      })
    ],
    optimization: {
      splitChunks: {
        chunks: 'all' // 拆分公共代码
      }
    }
  }
}

额外注意事项 #

• 确认Vue Router是history模式：

const router = new VueRouter({
  mode: 'history', // 必须设置为history，默认是hash模式（带#）
  routes
})

• 如果项目部署在子目录（比如http://xxx.com/my-app/），需要修改.htaccess的RewriteBase为子目录路径，同时配置Vue Router的base：

# .htaccess中修改
RewriteBase /my-app/

// router/index.js
const router = new VueRouter({
  mode: 'history',
  base: '/my-app/',
  routes
})

内容的提问来源于stack exchange，提问作者Harshit Vaishnav