在 nuxtServerInit

Question

我正在将 Nuxt 应用程序转换为 SSR - 因为我想使用 nuxtServerInit 和 asyncData。这些是我为转换它所采取的步骤。

1. 从ssr: false中删除nuxt.config.js
2. 在 nuxtServerInit 内的 store/index.js 中调度用于初始化商店状态的操作

---

现在我的 nuxt.config.js 看起来像这样

require("dotenv").config({ path: `.env.${process.env.NODE_ENV}` });

export default {
  router: {
    base: "/app/",
  },
  target: "static",
  head: {
    // Some head, meta, link config
  },
  css: ["@/assets/scss/main.scss"],
  styleResources: {
    scss: ["@/assets/scss/*.scss", "@/assets/scss/main.scss"],
  },
  plugins: ["@/plugins/apiFactory.js"],
  components: true,
  buildModules: [
    "@nuxtjs/eslint-module",
    ["@nuxtjs/dotenv", { filename: `.env.${process.env.NODE_ENV}` }],
  ],
  modules: [
    "bootstrap-vue/nuxt",
    "@nuxtjs/style-resources",
    ["nuxt-sass-resources-loader", "@/assets/scss/main.scss"],
  ],
  build: {
    splitChunks: {
      layouts: true,
    },
  },
};

store/index.js 看起来像这样。

import axios from "axios";

export const state = () => ({
  data: [],
});

export const mutations = {
  setData(state, data) {
    state.data = data;
  },
};

export const actions = {
  async nuxtServerInit({ dispatch }) {
    // Before converting to SSR this action was dispatched in page/component that need this data
    await dispatch("fetchData");
  },
  async fetchData({ commit }) {
    const { data } = await axios.get("http://localhost:3030/my/api/path");
    commit("setData", data);
  },
};

export const getters = { /* some getters */ };

---

但是在我重新启动开发服务器后 - 我收到了 connect ECONNREFUSED 127.0.0.1:3030

这是我在那之后采取的步骤

• 检查 localhost:3030 上的 API 是否正在运行且可访问 - 它正在运行并可通过直接 URL 和 Postman 访问
• 注释掉 // await dispatch("fetchData"); 中的 nuxtServerInit - 重新启动开发服务器 - 站点可以再次访问但没有初始数据。

所以，我怀疑 nuxtServerInit 中调度的操作导致了问题 - 如果是我该如何解决这个问题，或者接下来我应该在哪里查看？请告诉我，谢谢！

---

附加信息

• localhost:3030 上的 API 是 Lumen 7.2.2 版
• 应用程序将部署在共享主机上

Answer 1

主要原因是nuxt无法从它所在的地方连接到你的主机。 就我而言，它是 docker 容器，其中 127.0.0.1 是……容器！因此，您必须将 baseUrl 更改为该容器中实际可访问的服务器。

const axiosPlugin: Plugin = ({ $axios, isDev }) => {
    if (isDev && process.server) $axios.setBaseURL('http://172.22.0.1:3000/api')
}