Angular 将网页包生产指向不同的API url

我正在我的

angular4

项目中使用

webpack

。它指向

api

的同一url。现在，对于生产，我有不同的API url，所以我应该把新的url放在哪里？我正在使用jhipster项目。
来源：

webpack.prod.js:

const commonConfig = require('./webpack.common.js');
const webpackMerge = require('webpack-merge');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const Visualizer = require('webpack-visualizer-plugin');
const path = require('path');
const ENV = 'prod';

module.exports = webpackMerge(commonConfig({ env: ENV }), {
    devtool: 'source-map',
    output: {
        path: path.resolve('./build/www'),
        filename: '[hash].[name].bundle.js',
        chunkFilename: '[hash].[id].chunk.js'
    },
    plugins: [
        new ExtractTextPlugin('[hash].styles.css'),
        new Visualizer({
            // Webpack statistics in target folder
            filename: '../stats.html'
        })
    ]
});

---

我建议将您的环境因变量视为实际的环境变量，如12因素应用程序方法的说明

您不会因为不断变化的环境内容而使代码过载，而且您可以从应用程序外部轻松地更新代码，甚至可以直接从部署系统进行更新

在节点环境中，我个人更喜欢将这些变量存储到项目根目录中的专用

.env

文件中

VAR_1=foo
VAR_2=bar

对于每个环境，您可能有不同的

.xxx.env

文件，或者在生成之前以编程方式切换该文件

为了使声明的环境变量可用于代码，我建议使用

您可以从应用程序中获取环境变量，如标准节点的用户环境变量：

const var1 = process.env.VAR_1;   // foo
const var2 = process.env.VAR_2;   // bar

或者。此外，可能需要考虑向输出对象添加公共路径（要探索的东西）。 您只需编辑主机文件以包含所需的域，然后将以下代码添加到webpack.config：

devServer:{
主持人：“localhost.specialur.com”，
港口：1234，
https：对
},
//webpack.production.config.js
var path=require（'path'）；
var mainPath=path.resolve（_dirname，'app'，'main.js'）；
var buildPath=path.resolve（_dirname，'public'，'build'）；
条目：mainPath，
输出：{
//与Webpack相关的所有内容都应该经过构建路径，
//localhost:3000/构建。这使得代理更容易处理
路径：buildPath，
文件名：“bundle.js”
},

不确定这是否对您有用，但您是否尝试过将输出属性添加到module.exports中<代码>输出：{publicPath:'/'}，by

不同的API URL

你的意思是什么？您的

dev env

将调用consume

localhost:1000

您的

prod env

必须使用

localhost:4000

？正确吗？@Aravind，我想将

prod env

连接到外部url，而不是

localhost

@Aravind，你能帮我继续吗？你目前遇到什么问题？我无法在

webpack.config

中添加

devServer

。我的意思是我看不到选项

devServer

。你能帮我继续吗？只需复制并粘贴到你的网页配置中。将URL更改为您需要的URL。运行开发服务器。我的api服务器与生产环境不同，因此如何设置代理或目标

devServer

正在开发中，因此工作正常，但我只在生产方面有问题。@JeetenParmar您是在谈论输出。路径吗？我的api服务器与生产不同，所以如何设置代理或目标

devServer

正在开发中，因此它工作正常，但我只在生产中遇到问题。所以您想知道如何在生产中使用

webpack dev server

？请注意，大体上这是可能的，但不鼓励这样做。正如我看到的webpack，在

webpack.dev

中有

proxy

，因此它可以与第三方api配合使用。如何在

webpack.prod

中设置

proxy

？