Vue.js History模式下长URL路径路由问题求助

这问题我之前也碰到过，主要是两个核心原因：静态资源路径解析错误 + 服务器没配置History模式的 fallback 规则，咱们一步步来解决：

1. 先修正静态资源的公共路径 #

你看到的{URL}/catalog/[product-name]/p/dist/build.js这个请求路径明显有问题——浏览器是从当前路由的相对路径下去找静态资源的，而不是从域名根目录加载。

解决方法是把Vue项目的静态资源公共路径设为根路径/：

• 如果是Vue CLI 3+，在项目根目录的vue.config.js里添加：

module.exports = {
  publicPath: '/'
}

• 如果是Vue CLI 2.x，修改config/index.js里的assetsPublicPath为/：

// config/index.js
module.exports = {
  build: {
    assetsPublicPath: '/'
  }
}

2. 配置服务器的History模式 Fallback #

当启用history模式后，直接访问/catalog/xxx/p/xxx这种嵌套路由时，浏览器会向服务器请求这个路径，服务器默认会找对应目录的文件（但不存在），所以需要配置让所有不存在的路径都返回index.html，交给Vue Router来处理路由。

不同服务器的配置方式：

Nginx #

在你的站点配置文件里添加：

location / {
  try_files $uri $uri/ /index.html;
}

Apache #

在项目根目录创建.htaccess文件，内容如下：

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

Node.js (Express) #

使用connect-history-api-fallback中间件：

const express = require('express')
const history = require('connect-history-api-fallback')
const app = express()

// 先启用fallback中间件
app.use(history())
// 再托管静态资源
app.use(express.static(__dirname + '/dist'))

app.listen(3000, () => console.log('Server running on port 3000'))

3. 把路由改成动态参数形式（优化点） #

你现在的路由是硬编码了具体的产品名称和ID，这显然不实用——总不能每个产品都写一条路由吧？改成动态参数的形式，就能匹配所有产品路径：

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/catalog/:productName/p/:productId', // 动态参数用:开头
      name: 'ProductDetail',
      component: ProductDetail // 替换成你的产品详情组件
    }
    // 其他路由...
  ]
})

之后在组件里可以通过this.$route.params.productName和this.$route.params.productId获取对应的参数。

验证步骤 #

1. 重新打包项目（npm run build）
2. 把打包后的dist目录部署到服务器
3. 配置好上述的服务器规则
4. 直接访问/catalog/xxx/p/xxx路径，应该就能正常加载页面和静态资源了

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