Блог

Я конвертирую свое приложение 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

Это шаги, которые я предпринял после этого

• Проверьте, запущен ли и доступен ли API localhost:3030 — он запущен и доступен через прямой URL и Postman
• Прокомментируйте // await dispatch("fetchData"); nuxtServerInit перезапуск сервера разработки — сайт снова доступен, но без исходных данных.

Итак, я подозревал, что действие, отправленное в nuxtServerInit , вызывает проблему — если это так, как мне решить эту проблему или где я должен искать дальше? Пожалуйста, дайте мне знать, спасибо!

Дополнительная информация

• Включен API localhost:3030 Lumen версии 7.2.2
• Приложение будет развернуто на общем хостинге

Основная причина в том, что nuxt не может подключиться к вашему хосту с того места, где он находится. В моем случае это контейнер docker, где находится 127.0.0.1… контейнер! Итак, вам нужно изменить baseUrl на фактически доступный сервер из этого контейнера.

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

Если у вас есть собственный сервер, добавьте свой домен api в файл hosts (в linux /etc/hosts)

 127.0.0.1 api.domain.com
 

Я 2 дня пытался понять, почему это не работает, а затем до меня дошло, что серверная часть pm2 имеет доступ только локально.