Nuxt Heroku要用什么填充baseurl才能运行？ [英] Nuxt Heroku what to fill baseurl for it to run?

问题描述

这是我的nuxt.config.js文件

env: {
  baseUrl: process.env.BASE_URL || "http://localhost:3000"
},
  
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
  baseURL: process.env.baseUrl,
  browserBaseURL: "http://localhost:3000"
},

Heroku日志

收听时间：http://localhost:21411/
错误R10(启动超时)->；Web进程无法在启动后60秒内绑定到$Port。

我需要向Heroku admin添加哪些环境变量才能使其工作，Heroku托管的端口每次尝试运行时都会不断更改。

编辑此处是我的Nuxt配置：

     export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    script: [
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-core.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-service.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-ui.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-clustering.js"
      },
      {
        type: "text/javascript",
        charset: "UTF-8",
        src: "https://js.api.here.com/v3/3.1/mapsjs-data.js"
      }
    ],
    title: "Restaurants-D-System",
    htmlAttrs: {
      lang: "en"
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" }
    ],
    link: [
      {
        rel: "stylesheet",
        type: "text/css",
        href: "https://js.api.here.com/v3/3.1/mapsjs-ui.css"
      },
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "preconnect",
        href: "https://fonts.gstatic.com",
        href: "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
        rel: "stylesheet"
      },
      {
        rel: "preconnect",
        href: "https://fonts.gstatic.com",
        href: "https://fonts.googleapis.com/css2?family=Ribeye&display=swap",
        rel: "stylesheet"
      }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  CSS: ["~/assets/normalize.css"],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    "@nuxtjs/style-resources",
    // https://go.nuxtjs.dev/buefy
    "nuxt-buefy",
    // https://go.nuxtjs.dev/axios
    "@nuxtjs/axios"
  ],
  styleResources: {
    scss: ["./assets/main.scss"],
    CSS: ["./assets/normalize.css"]
  },


  axios: {
    baseURL: "http://localhost:4000" // Used as fallback if no runtime config is provided
  },
  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL
    }
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL
    }
  },
  serverMiddleware: [{ path: "/api", handler: "~/api/index.js" }],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {}
};

这是我的json：

{
  
  "version": "1.0.0",
  "engines": {
    "node": "14.16.1"
  },
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/style-resources": "^1.0.0",
    "@vonage/server-sdk": "^2.10.8",
    "core-js": "^3.9.1",
    "express": "^4.17.1",
    "firebase-admin": "^9.8.0",
    "infobip-nodejs": "^0.1.0-alpha.1",
    "lodash.debounce": "^4.0.8",
    "normalize.css": "^8.0.1",
    "nuxt": "^2.2.0",
    "nuxt-buefy": "^0.4.4"
  },
  "devDependencies": {
    "fibers": "^5.0.0",
    "sass": "^1.34.0",
    "sass-loader": "^10.2.0"
  }
}

下面是我的Express javascript文件API：

const express = require("express");
const sms = require("./infoSms/index");
const router = require("../api/routes/routesIndex");
const { db, auth, timestamp } = require("./dataBase/index");

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
port = process.env.PORT || 3000;

app.use(router);

if (require.main === module) {
  app.listen(port, () => {
    console.log(`server is up ` + port);
  });
} else {
  console.log("server is up by Nuxtjs");
}
module.exports = app;

推荐答案

官方@nuxtjs/axios documentation

对设置进行了很好的说明

export default {
  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
    baseURL: 'http://localhost:4000', // Used as fallback if no runtime config is provided
  },

  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL
    }
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL
    }
  },
}

另外，如此处所述

如果在生产中使用环境变量，则必须使用运行时配置，否则，这些值将在生成期间进行硬编码，并且不会更改。

---

通常，WebServices在端口80(Https)或443(Https)上运行，请仔细检查仪表板中是否有该端口(https://dashboard.heroku.com/apps/<your-app>/settings)。尽管如此，您可能甚至不需要指定它。

阅读deployment page以了解到目前为止所需的几个步骤

heroku create myapp
heroku buildpacks:set heroku/nodejs
heroku config:set HOST=0.0.0.0
git push heroku master // git push heroku develop:master if working on develop and not master

此外，更喜欢对Nuxt中的环境变量使用此方法：https://stackoverflow.com/a/67705541/8816585

这篇关于Nuxt Heroku要用什么填充baseurl才能运行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！