Vue 路由 output.publicPath 配置指南：hash 和 history 模式

Vue 路由在不同模式下的 output.publicPath 配置指南

前言

Vue Router 是 Vue.js 框架中一个强大的路由系统，它允许在单页面应用程序中轻松管理页面导航。Vue Router 支持多种路由模式，包括 hash 模式和 history 模式，每种模式都有其优缺点。在不同的模式下，如何正确配置 output.publicPath 是一个关键问题，本文将深入探讨这个主题。

什么是 output.publicPath

在 Webpack 构建过程中，output.publicPath 选项指定了应用程序在部署时的根路径。它通常用于确保应用程序的静态资源（例如 CSS、JavaScript 和图像）可以从正确的路径加载。

hash 模式下的 output.publicPath

在 hash 模式下，URL 中使用哈希标记（#）来表示不同的路由。在这种模式下，output.publicPath 应设置为根路径，例如 /。这是因为哈希不会影响页面加载，因此应用程序的静态资源可以从根路径加载。

history 模式下的 output.publicPath

在 history 模式下，URL 使用浏览器的历史记录 API 来表示不同的路由。在这种模式下，output.publicPath 应设置为应用程序在服务器上的部署路径。例如，如果应用程序部署在 /my-app 路径下，则 output.publicPath 应设置为 /my-app/。

如何设置 output.publicPath

在 Vue CLI 项目中，可以在 vue.config.js 文件中设置 output.publicPath 选项。例如：

module.exports = {
  publicPath: '/', // hash 模式
  // publicPath: '/my-app/', // history 模式
};

实例

让我们通过一个示例来说明在不同模式下配置 output.publicPath 的重要性。假设我们有一个 Vue.js 应用程序，我们希望在 hash 模式和 history 模式下部署它。

hash 模式

如果我们使用 hash 模式，output.publicPath 应设置为 /。以下是构建配置：

{
  "output": {
    "publicPath": "/"
  }
}

history 模式

如果我们使用 history 模式，output.publicPath 应设置为应用程序的部署路径。例如，如果应用程序部署在 /my-app 路径下，则构建配置如下：

{
  "output": {
    "publicPath": "/my-app/"
  }
}

结论

正确配置 Vue 路由的 output.publicPath 对于确保应用程序在不同模式下正常运行至关重要。在 hash 模式下，output.publicPath 应设置为根路径，而在 history 模式下，它应设置为应用程序的部署路径。通过遵循本文中的指南，你可以确保你的 Vue.js 应用程序在任何模式下都能正确加载其静态资源。