Question

我已经使用Visual Studio 2017 for .NET Core中的React模板创建了SPA。我很高兴编辑Typescript并创建新组件，但是我希望能够配置某些设置，例如API地址。我发现create-react-app使用环境变量，这正是我想要的。因此，我使用create-react-app并将.env文件添加到我的项目目录中，设置为REACT_APP_SETTING。无法在组件中使用{process.env.REACT_APP_SETTING}访问变量。返回默认的SPA模板（即不是由create-react-app直接制作）并安装了dotenv。我在根目录（我的.csproj文件所在的位置）中有一个名为.env的文件，其内容如下：

HELLO=Hello

我制作了一个组件来显示它：

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

export class SayHello extends React.Component<RouteComponentProps<{}>, {}> {
    public render() {
        return <div><h1>Hello: {process.env.HELLO}</h1></div>;
    }
}

我的webpack.config.js文件如下所示：

const path = require('path');
const webpack = require('webpack');
// The line below is mine.
require('dotenv').config({path: path.join(__dirname, '.env')});
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
   return [{
        stats: { modules: false },
        entry: { 'main': './ClientApp/boot.tsx' },
        resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
        output: {
            path: path.join(__dirname, bundleOutputDir),
            filename: '[name].js',
            publicPath: 'dist/'
        },
        module: {
            rules: [
                { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [
            new CheckerPlugin(),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin('site.css')
        ])
    }];
};

我通过路由将其连接起来并导航到页面。我看到带有文本“ Hello：”的h1元素，因此它仍然没有读取设置。我在Google周围搜索（包括阅读dotenv文档），它应该可以正常工作。我可能会缺少什么？

谢谢。

Answer 1

尝试从您的应用中要求dotenv而不是从Webpack配置中获取。

Answer 2

也许更容易一些：作为弹出 Webpack 的替代方法，您还可以在 Visual Studio 中设置您的环境，将环境复制到您的 ClientApp 文件夹或 CRA 层次结构，然后只需从其他 TS/JS/TSX/ 正常导入即可JSX 文件。

通过这种方式，您可以使用“调试”、“发布”、“本地”等普通 VS 构造来确定您的 React 环境

在我项目的“预构建事件命令行”部分，我有这样的东西：

if $(ConfigurationName) == Local cmd /c copy "ReactEnv\env.local.ts" "ClientApp\src\env.ts" /Y

.. 每次我需要调试或部署时都会运行。

我的 env.ts 格式是这样的：

//env obj creation
interface ISPECIALENV {
    baseUrl: string
}

const SPECIALENV: ISPECIALENV = {
    baseUrl: "localhost:33082",
}
export default SPECIALENV

这种方式在开发/部署过程中不需要人工...

.NET Core React SPA中的环境变量

2 个答案: