vue动态配置域名

VUE_APP_API_URL=https://dev.api.example.com

VUE_APP_API_URL=https://api.example.com

<template>
  <div>
    <h1>Dynamic Domain Configuration</h1>
    <button @click="fetchData">Fetch Data</button>
    <pre>{{ data }}</pre>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get(process.env.VUE_APP_API_URL + '/data');
        this.data = response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
  },
};
</script>

// vue.config.js
module.exports = {
  devServer: {
    env: {
      VUE_APP_API_URL: process.env.VUE_APP_API_URL,
    },
  },
};

# Nginx 配置示例
server {
  listen 80;
  server_name yourdomain.com;

  location /api {
    proxy_pass http://api.example.com;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}