推送现场直播dotenv-webpack REACT

问题描述

嗨，所以我在实时部署React网站时遇到了一些问题。除了API密钥在日志中显示未定义的错误消息外，一切似乎都可以正常工作。

当我处于开发模式时，一切正常工作

当我使用webpack运行构建命令时。它生成的index.html以及关联的javascript文件使api键正常工作。

但是，当我实时启动站点时，控制台中出现错误消息，提示密钥未定义。

import React,{ useEffect,useState } from "react";
import Axios from "axios";
// Imported components below
import LoadingIcon from "./LoadingIcon";

function WeatherApp() {
  // States
  const [weather,setWeather] = useState();
  const [isLoading,setIsLoading] = useState(true);
  const [conditionIcon,setConditionIcon] = useState();

  useEffect(() => {
    async function getWeather() {
      console.log("function executed!");
      Axios.get(
        `https://api.XXXXX.com/X/XXXX.json?key=${process.env.REACT_APP_WEATHERAPI}&q=XXX&days=1`
      )
        .then(response => {
          setWeather(response.data);
          setConditionIcon(response.data.current.condition.icon);
          setIsLoading(false);
        })
        .catch(e => console.log(e));
    }
    getWeather();
    // Function will execute once every 30 minutes
    const interval = setInterval(() => {
      getWeather();
    },180000);
    return () => clearInterval(interval);
  },[]);

这是我用来构建生产版本的Webpack文件

const currentTask = process.env.npm_lifecycle_event;
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { postcss } = require("postcss-mixins");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const fse = require("fs-extra");
const webpack = require("webpack");
const dotenv = require("dotenv-webpack");

const postCssplugins = [
  require("postcss-import"),require("postcss-mixins"),require("postcss-simple-vars"),require("postcss-nested"),require("postcss-hexrgba"),require("autoprefixer")
];

class RunAfterCompile {
  apply(compiler) {
    compiler.hooks.done.tap("copy images",function () {
      fse.copySync("./app/assets/images","./docs/assets/images");
    });
  }
}

let cssConfig = {
  test: /\.css$/i,use: [
    "css-loader?url=false",{ loader: "postcss-loader",options: { plugins: postCssplugins } }
  ]
};

let pages = fse
  .readdirsync("./app")
  .filter(function (file) {
    return file.endsWith(".html");
  })
  .map(function (page) {
    return new HtmlWebpackPlugin({
      filename: page,template: `./app/${page}`
    });
  });

let config = {
  entry: "./app/assets/scripts/App.js",plugins: pages,module: {
    rules: [
      cssConfig,{
        test: /\.js$/,exclude: /(node_modules)/,use: {
          loader: "babel-loader",options: {
            presets: ["@babel/preset-react","@babel/preset-env"],plugins: ["@babel/plugin-transform-runtime"]
          }
        }
      }
    ]
  }
};

if (currentTask == "dev") {
  config.plugins.push(new dotenv());
  cssConfig.use.unshift("style-loader");
  config.output = {
    filename: "bundled.js",path: path.resolve(__dirname,"app")
  };
  config.devServer = {
    before: function (app,server) {
      server._watch("./app/**/*.html");
    },contentBase: path.join(__dirname,"app"),hot: true,port: 3000,host: "0.0.0.0",historyApiFallback: { index: "/" }
  };
  config.mode = "development";
}

if (currentTask == "build") {
  cssConfig.use.unshift(MiniCssExtractPlugin.loader);
  postCssplugins.push(require("cssnano"));
  config.output = {
    filename: "[name].[chunkhash].js",chunkFilename: "[name].[chunkhash].js","docs")
  };
  config.mode = "production";
  config.optimization = {
    splitChunks: { chunks: "all" }
  };
  config.plugins.push(
    new dotenv(),new CleanWebpackPlugin(),new MiniCssExtractPlugin({ filename: "styles.[chunkhash].css" }),new RunAfterCompile()
  );
}

module.exports = config;

除了使用nelify推送我的网站外，一切似乎都可以正常工作。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）