时间戳

首页 > 解决方案 > .env Nuxt JS 无法正确解析生成选项中的路由

javascript - .env Nuxt JS 无法正确解析生成选项中的路由

问题描述

我正在尝试使用 Nuxt JS 的 2.9.2 生成对象将动态页面生成为静态文件，使用我的.env文件来拉取 URL，我很难让它正确链接：

nuxt.config.js

require('dotenv').config();
import pkg from './package'
import axios from 'axios'

export default {
  mode: 'universal',

  env: {
    blog_api: process.env.BLOG_API || "http://localhost:3000/articles/blogs.json"
  },

  /*
  ** Build directory
  */
  generate: {
    dir: 'dist-next',
    routes: function () {
      return axios.get(`${process.env.blog_api}`)
      .then((res) => {
        return res.data.blogs.map((blog) => {
          return '/posts/view/' + blog.title
        })
      })
    }
  }
}

更具体地说${process.env.blog_api}，上面的代码似乎无法解析路由，尽管如果我用我自己的本地域替换它，它可以完美地工作。

.env

BLOG_API="http://my-local-domain.clone/articles/blogs.json"

编辑：

用我的配置更新了代码，http://my-local-domain.clone/articles/blogs.json在里面static/articles

标签： javascriptvue.jsvuejs2nuxt.js

解决方案

您应该使用 dotenv 模块：

https://www.npmjs.com/package/dotenv

有关 NUXT 配置的更多信息，请点击此处：

https://samuelcoe.com/blog/nuxt-dotenv/

您可能希望在 nuxt.config.js 中设置 env 属性，例如：

module.exports = {
  env: {
    BLOG_API: process.env.BLOG_API_URL,
  },

在您的组件中，您现在可以使用它们：

      makeAsyncCall({
        to: process.env.BLOG_API,
      })

推荐阅读