nuxt 如何在 javascript 文件中访问 env

Question

我无法在 nuxt 2.15 之外访问我的 env 变量，当我部署时，我可以在浏览器中看到

$nuxt.context.$config

具有正确的变量，但是在自定义 js 文件上我无法访问

process.env.baseURL

它返回未定义

// nuxt.config.ts
module.exports = {
  ssr: false,
  buildModules: [  
    ['@nuxtjs/dotenv', { systemvars: true }],
  ],
  publicRuntimeConfig: {
    baseURL: process.env.baseURL,
  }
  env: {
    baseURL: process.env.baseURL,
  }
}

跨页面/组件/中间件工作正常我可以使用 $config 对象访问值

问题是我有一个 JS 文件，我想在其中导入 baseURL 的值以在其他地方使用，并且返回为未定义

//constant.ts

const { publicRuntimeConfig, env } = require('./nuxt.config.ts');
const { baseURL, VPN_IP, ADMIN_MODE } = publicRuntimeConfig;

console.info('constant: baseURL', baseURL); // also undefined

export const GRPC_HOST = process.env.baseURL;  //this is undefined

我尝试将启动命令从

nuxt start

更改为

node server/index.ts

const express = require('express');
const consola = require('consola');
require('dotenv').config();
const { Nuxt, Builder } = require('nuxt');
const app = express();

// Import and Set Nuxt.js options
const config = require('../nuxt.config.ts');
config.dev = process.env.NODE_ENV !== 'production';

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt({ ...config, env: { baseURL: process.env.baseURL } });

  const { host, port } = nuxt.options.server;

  await nuxt.ready();
  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt);
    await builder.build();
  }

  // Give nuxt middleware to express
  app.use(nuxt.render);

  // Listen the server
  app.listen(port, host);
  consola.ready({
    message: `Server listening on https://${host}:${port} , environment:: ${process.env.NODE_ENV} baseURL:: ${process.env.baseURL}`,
    badge: true,
  });
}
start();

在服务器日志上我可以看到 baseURL 设置在这里 NODE_ENV 设置为生产环境

Answer 1

尝试使用

$config

创建一个 javascript 文件。首先，您需要确保已正确导入 $config 对象。您可以将

window.$nuxt.$config

与变量一起使用，

试试这个：

const baseURL = window.$nuxt.$config.baseURL
console.info('constant: baseURL', baseURL)
export const GRPC_HOST = baseURL