vue3 + vite 配置生成环境打包请求url的问题？

Question

axios.ts配置baseUrl

import axios from 'axios'
import { config } from 'process'

let url = import.meta.env;
console.log(1234,url);
axios.create({
  baseURL:import.meta.env.VITE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, 
  timeout: 5000
});

env.production

VITE_APP_VERSION = "1.0.0"
NODE_ENV= 'production'
ENV_CONFIG= 'prod',
VITE_APP_BASE_API= 'http://192.168.0.7:8088'
JIGOU_ENV= 'prod'

npm run build 打包放到nginx下
接口请求 localhost:8033/api/getData.json 404报错

请教一下哪里配置的不对

Answer 1

你已经配置了 baseURL。但是你还要将创建的 axios 实例分配给一个变量，并在后续的请求中使用该变量。目前，你的代码创建了一个 axios 实例，但是没有将其分配给任何变量，所以在其他地方使用时不会应用你的配置。

为了解决这个问题，请修改你的代码，将创建的 axios 实例分配给一个变量，例如：

const apiClient = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, 
  timeout: 5000,
});

然后，在其他地方使用 apiClient 变量进行请求，而不是直接使用 axios。例如：

apiClient.get('/api/getData.json')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Answer 2

检查一下后端的接口是否有 /api 这个前缀。
一般来说应该先和搭档的后端同学沟通一下。404很明显就是请求地址错了。