返回

如何从 Vue 项目中移除井号 #

前端

在传统的单页面应用 (SPA) 中，前端路由通常使用 URL 哈希 (URL 中的 # 号及其后面的部分) 来管理页面之间的导航。这种方式存在以下几个问题：

  1. SEO 不友好： 搜索引擎无法抓取 URL 哈希，因此使用 URL 哈希的 SPA 在搜索结果中的排名会较低。
  2. URL 美观度差： URL 哈希会使 URL 看起来很长且凌乱，影响用户体验。
  3. 用户体验不佳： 当用户在页面之间导航时，URL 哈希会发生变化，这可能会导致页面闪烁或跳动，影响用户体验。

为了解决以上问题，我们可以使用 history 模式来实现前端路由。history 模式不会在 URL 中使用井号 #，而是使用浏览器的历史记录 API 来管理页面之间的导航。

在 Vue 项目中使用 history 模式，需要在 vue.config.js 文件中进行配置：

module.exports = {
  router: {
    mode: 'history'
  }
}

完成以上配置后，我们需要在服务器端进行相应配置，以便服务器能够正确处理 history 模式下的路由。

对于 nginx 服务器，需要在配置文件中添加以下内容：

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

对于 Apache 服务器，需要在 .htaccess 文件中添加以下内容：

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

在开发环境中，Vue 项目通常使用 webpack-dev-server 进行热重载。在生产环境中，我们需要构建项目并将其部署到服务器上。

npm run build

构建完成后，将构建目录中的所有文件复制到服务器上，并确保服务器的根目录指向 dist 文件夹。

  1. 在使用 history 模式时，我们需要确保服务器能够正确处理 history 模式下的路由。否则，可能会导致 404 错误或其他问题。
  2. 在使用 history 模式时，需要在项目中添加一个基准 URL。基准 URL 是一个字符串，它告诉浏览器在解析相对路径时应该从哪里开始解析。例如，如果我们的基准 URL 是 /app/，那么当我们在项目中使用 /home 这个相对路径时，浏览器会将其解析为 /app/home。