Svelte全局配置axios：解决Store文件中未定义问题

核心问题原因 #

你的Store模块作为ES模块，会在入口文件（main.js/App.svelte）执行前就被解析加载，导致你挂载到window的Axios或在入口文件中做的配置，在Store初始化时还未生效，所以会出现"axios未定义"的报错。

推荐解决方案：封装独立Axios实例（模块化方案） #

最可靠且符合前端模块化规范的方式是单独创建一个配置好的Axios实例文件，所有组件和Store都导入这个实例，而非原生Axios或全局挂载的版本。

1. 创建Axios配置文件

在项目中新建一个专门的Axios配置文件，比如 src/lib/axios.js（SvelteKit项目）或 src/utils/axios.js（普通Svelte项目）：

import axios from 'axios';

// 创建预配置的Axios实例
const axiosInstance = axios.create({
  baseURL: '你的Laravel API基础地址',
  withCredentials: true,
  headers: {
    'Accept': 'application/json',
    // 可添加其他默认请求头，比如Content-Type
    'Content-Type': 'application/json'
  }
});

// 可选：添加请求/响应拦截器
// 请求拦截器（比如自动携带token）
axiosInstance.interceptors.request.use(config => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器（比如统一处理401错误）
axiosInstance.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // 这里可添加跳转登录页等逻辑
      console.log('未授权，请重新登录');
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;

2. 在组件中使用

直接导入这个预配置的实例即可，无需重复配置：

<script>
import axios from '$lib/axios'; // SvelteKit路径，普通Svelte用'../utils/axios'

let userData;

async function fetchUser() {
  const res = await axios.get('/api/user/profile');
  userData = res.data;
}
</script>

<button on:click={fetchUser}>获取用户信息</button>
{#if userData}
  <p>用户名：{userData.name}</p>
{/if}

3. 在Store文件中使用

同样导入预配置的实例，避免重复配置和未定义问题：

// src/stores/postStore.js
import { writable } from 'svelte/store';
import axios from '$lib/axios';

const posts = writable([]);

export const loadPosts = async () => {
  try {
    const res = await axios.get('/api/posts');
    posts.set(res.data);
  } catch (err) {
    console.error('加载文章失败：', err);
  }
};

export default posts;

为什么不推荐全局挂载到window？ #

全局挂载虽然能让组件直接使用，但不符合模块化开发规范，且会导致类型检查失效、污染全局作用域，同时无法解决Store初始化顺序的问题——因为Store加载时window.axios还未被赋值。

内容的提问来源于stack exchange，提问作者silvered.dragon