WEB：如何设置 Vue 路由访问的技术指南

拾荒的小海螺 2024-09-05

236

1、简述

在 Vue 项目中，当你使用 vue-router 配置路由并进行构建后，可能会遇到静态文件（如图片、CSS、JavaScript 文件）无法正确加载的问题。以下是一些方法，帮助你正确配置静态文件的访问路径。

2、使用 publicPath 设置根路径

如果你的 Vue 应用程序部署在子目录中（例如 https://example.com/my-app/），你需要在 vue.config.js 中设置 publicPath，以确保静态文件的路径与应用程序的路由一致。

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-app/'  // 替换为实际部署路径
    : '/'
}

在开发环境中，publicPath 将会是 '/'，但在生产环境中，它会指向你部署的子目录。

2、路由的 history 模式

Vue Router 提供了两种路由模式：hash 模式和 history 模式。hash 模式在 URL 中使用 # 符号，而 history 模式使用 HTML5 的 pushState 来管理路由。

如果你使用 history 模式，服务器需要做额外配置，以确保在刷新页面时，正确地返回 index.html 文件，而不是出现 404 错误。

在 vue-router 中启用 history 模式：

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';


Vue.use(Router);


export default new Router({
  mode: 'history', // 使用 history 模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue')
    }
  ]
});

3、服务器配置

如果你使用 history 模式，部署时需要确保服务器能够正确处理所有路由，并将它们重定向到 index.html。不同的服务器有不同的配置方式。

3.1 Nginx 配置

在 Nginx 中，你可以通过以下方式配置路由重定向：

server {
    listen 80;
    server_name example.com;


    location  {
        root path/to/your/dist;
        try_files $uri $uri/ index.html;
    }


    location static/ {
        # 这里处理静态文件
        root path/to/your/dist;
    }
}

3.2 Apache 配置

在 Apache 中，你可以使用 .htaccess 文件来配置重定向：

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

4、引用静态资源

在 Vue 中，引用静态资源时，请确保使用相对路径或使用 Vue 提供的 @ 符号来引用 src 目录下的资源。例如：

<img src="@/assets/logo.png" alt="Logo">

如果你的静态资源存放在 public 目录中，直接引用即可：

<img src="/static/logo.png" alt="Logo">

5、Vue 项目构建后的访问路径

在生产环境下，如果你的项目构建后访问路径有特殊要求，可以在路由配置中设置 base 选项。例如，如果你的应用程序部署在 https://example.com/my-app/ 路径下：

export default new Router({
  mode: 'history',
  base: '/my-app/',  // 设置基础路径
  routes: [
    // 你的路由配置
  ]
});

6、总结

通过设置 publicPath、正确配置路由模式和服务器配置，可以确保 Vue 项目在构建后，静态文件能够正确访问。如果在部署后仍然遇到路径问题，检查浏览器开发者工具中的网络请求，确保静态资源的路径正确无误。

文章转载自拾荒的小海螺，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

WEB：如何设置 Vue 路由访问的技术指南

评论