Vue 多个服务的路由配置在 vue.config.js 里面怎么写

精选原创

wx661607c93692e 2024-09-08 09:51:54 ©著作权

©著作权归作者所有：来自51CTO博客作者wx661607c93692e的原创作品，请联系作者获取转载授权，否则将追究法律责任

在 Vue 项目的 vue.config.js 文件中，你不能直接配置路由服务，因为这个文件主要用于配置 Webpack 和开发服务器等项目设置。路由配置通常是在 Vue 项目的代码中设置的，例如在 router/index.js 文件中。

不过，如果你需要配置多个服务（即不同的 API 服务或代理服务），你可以在 vue.config.js 文件中设置代理。以下是如何配置多个代理服务的示例：

示例代码

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      // 代理到第一个服务
      '/api/service1': {
        target: 'http://service1.example.com',
        changeOrigin: true,
        pathRewrite: { '^/api/service1': '' },
      },
      // 代理到第二个服务
      '/api/service2': {
        target: 'http://service2.example.com',
        changeOrigin: true,
        pathRewrite: { '^/api/service2': '' },
      },
    }
  }
};

说明

/api/service1 和 /api/service2: 是你前端代码中使用的 API 路径前缀。通过这些路径，所有发往这些路径的请求都会被代理到相应的目标服务。
target: 目标服务的地址。将请求代理到这个地址。
changeOrigin: 如果为 true，会将请求头中的 Origin 字段修改为目标服务的地址。
pathRewrite: 用于重写路径。在这个示例中，路径前缀被去掉，实际请求会发送到目标服务的根路径。

路由配置

对于 Vue 路由配置（不同页面组件的路由设置），你可以在 src/router/index.js 文件中进行：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import About from '@/components/About';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});

说明

routes: 配置路由规则，将 URL 路径映射到 Vue 组件。
mode: 'history': 使用 HTML5 History 模式来去掉 URL 中的 # 符号。

这样，你可以在 vue.config.js 中配置开发服务器代理，同时在 Vue 代码中设置应用程序的路由。

vue 调用接口 getUserByid get请求方式

要在 Vue.js 中使用 axios 或 fetch 调用 getUserById 接口（GET 请求），可以按照以下步骤进行：

使用 `axios`

安装 axios

npm install axios

在 Vue 组件中调用接口

<template>
  <div>
    <h1>User Details</h1>
    <p v-if="user">Name: {{ user.name }}</p>
    <p v-if="user">Email: {{ user.email }}</p>
    <p v-else>Loading...</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: null,
    };
  },
  created() {
    this.fetchUserById(1); // 调用接口，假设用户 ID 为 1
  },
  methods: {
    async fetchUserById(userId) {
      try {
        const response = await axios.get(`https://api.example.com/getUserById/${userId}`);
        this.user = response.data;
      } catch (error) {
        console.error('Error fetching user:', error);
      }
    },
  },
};
</script>

<style scoped>
/* Add your styles here */
</style>

使用 `fetch`

<template>
  <div>
    <h1>User Details</h1>
    <p v-if="user">Name: {{ user.name }}</p>
    <p v-if="user">Email: {{ user.email }}</p>
    <p v-else>Loading...</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: null,
    };
  },
  created() {
    this.fetchUserById(1); // 调用接口，假设用户 ID 为 1
  },
  methods: {
    async fetchUserById(userId) {
      try {
        const response = await fetch(`https://api.example.com/getUserById/${userId}`);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        this.user = data;
      } catch (error) {
        console.error('Error fetching user:', error);
      }
    },
  },
};
</script>

<style scoped>
/* Add your styles here */
</style>