如何在 Aurelia 中更改我的 API BaseUrl 以进行开发？

Question

我的app.ts中有以下内容

constructor( container: Container ) {
    let client: HttpClient = new HttpClient;
    client.configure( config => {
        config.useStandardConfiguration()
            .withBaseUrl( 'http://localhost:8080/' )
            .withDefaults( {
                credentials: 'include',
                headers: {
                    Accept: 'application/json'
                }
            } );
    } );
    container.registerSingleton( HttpClient, () => client );
}

问题是http://localhost:8080 只对本地开发正确，其余时间应该是/。这是因为我在本地在不同的端口上运行 Spring Boot Tomcat 和 webpack dev，以便 webpacks dev 服务器可以热重建 typescript。

我在webpack.config.js 中看到了const baseUrl = '/';，当然它针对不同的环境有不同的部分。

我正在添加这个

var apiBaseUrl = baseUrl;
...
case 'development':
    process.env.NODE_ENV = 'development';
    apiBaseUrl = 'http://localhost:8080';
...
require( '@easy-webpack/config-aurelia' )
        ( { root: rootDir, src: srcDir, title: title, baseUrl: baseUrl, apiBaseUrl: apiBaseUrl } ),

我看到index.html中使用了这些变量

<title><%- webpackConfig.metadata.title %></title>

这种语法对打字稿毫无意义。我如何在app.ts 中使用这些？

更新 我注意到 webpack 开发服务器有一个 proxy 选项，似乎只是为了这个。我不知道如何将它集成到我当前的 webpack 配置中。

"use strict";

/**
 * To learn more about how to use Easy Webpack
 * Take a look at the README here: https://github.com/easy-webpack/core
 **/
const easyWebpack = require( '@easy-webpack/core' );
const generateConfig = easyWebpack.default;
const get = easyWebpack.get;
const path = require( 'path' );
const ENV = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() || 'development';
var config;

// basic configuration:
const title = 'RPF';
const baseUrl = '/';
const rootDir = path.resolve();
const srcDir = path.resolve( 'src' );
const outDir = path.resolve( 'dist' );

const coreBundles = {
    bootstrap: [
        'aurelia-bootstrapper-webpack',
        'aurelia-polyfills',
        'aurelia-pal',
        'aurelia-pal-browser',
        'regenerator-runtime',
        'bluebird'
    ],
    // these will be included in the 'aurelia' bundle (except for the above bootstrap packages)
    aurelia: [
        'aurelia-bootstrapper-webpack',
        'aurelia-binding',
        'aurelia-dependency-injection',
        'aurelia-event-aggregator',
        'aurelia-framework',
        'aurelia-history',
        'aurelia-history-browser',
        'aurelia-loader',
        'aurelia-loader-webpack',
        'aurelia-logging',
        'aurelia-logging-console',
        'aurelia-metadata',
        'aurelia-pal',
        'aurelia-pal-browser',
        'aurelia-path',
        'aurelia-polyfills',
        'aurelia-route-recognizer',
        'aurelia-router',
        'aurelia-task-queue',
        'aurelia-templating',
        'aurelia-templating-binding',
        'aurelia-templating-router',
        'aurelia-templating-resources',
    ]
};

const baseConfig = {
    entry: {
        'app': [ /* this is filled by the aurelia-webpack-plugin */ ],
        'aurelia-bootstrap': coreBundles.bootstrap,
        'aurelia': coreBundles.aurelia.filter( function ( pkg ) {
            return coreBundles.bootstrap.indexOf( pkg ) === -1
        } )
    },
    output: {
        path: outDir
    }
};

// advanced configuration:
switch ( ENV ) {
    case 'production':
        config = generateConfig(
            baseConfig,

            require( '@easy-webpack/config-env-production' )
            ( { compress: true } ),

            require( '@easy-webpack/config-aurelia' )
            ( { root: rootDir, src: srcDir, title: title, baseUrl: baseUrl } ),

            require( '@easy-webpack/config-tslint' )
            ( { emitErrors: true, failOnHint: true } ),
            require( '@easy-webpack/config-typescript' )(),
            require( '@easy-webpack/config-html' )(),

            require( '@easy-webpack/config-css' )
            ( { filename: 'styles.css', allChunks: true, sourceMap: false } ),

            require( '@easy-webpack/config-fonts-and-images' )(),
            require( '@easy-webpack/config-global-bluebird' )(),
            require( '@easy-webpack/config-global-jquery' )(),
            require( '@easy-webpack/config-global-regenerator' )(),
            require( '@easy-webpack/config-generate-index-html' )
            ( { minify: true } ),

            require( '@easy-webpack/config-common-chunks-simple' )
            ( { appChunkName: 'app', firstChunk: 'aurelia-bootstrap' } ),

            require( '@easy-webpack/config-copy-files' )
            ( { patterns: [ { from: 'favicon.ico', to: 'favicon.ico' } ] } ),

            require( '@easy-webpack/config-uglify' )
            ( { debug: false } )
        );
        break;

    case 'test':
        config = generateConfig(
            baseConfig,

            require( '@easy-webpack/config-env-development' )
            ( { devtool: 'inline-source-map' } ),

            require( '@easy-webpack/config-aurelia' )
            ( { root: rootDir, src: srcDir, title: title, baseUrl: baseUrl } ),

            require( '@easy-webpack/config-typescript' )
            ( { options: { doTypeCheck: false, compilerOptions: { sourceMap: false, inlineSourceMap: true } } } ),

            require( '@easy-webpack/config-html' )(),

            require( '@easy-webpack/config-css' )
            ( { filename: 'styles.css', allChunks: true, sourceMap: false } ),

            require( '@easy-webpack/config-fonts-and-images' )(),
            require( '@easy-webpack/config-global-bluebird' )(),
            require( '@easy-webpack/config-global-jquery' )(),
            require( '@easy-webpack/config-global-regenerator' )(),
            require( '@easy-webpack/config-generate-index-html' )(),

            require( '@easy-webpack/config-test-coverage-istanbul' )()
        );
        break;

    default:
    case 'development':
        process.env.NODE_ENV = 'development';
        config = generateConfig(
            baseConfig,

            require( '@easy-webpack/config-env-development' )(),

            require( '@easy-webpack/config-aurelia' )
            ( { root: rootDir, src: srcDir, title: title, baseUrl: baseUrl } ),

            require( '@easy-webpack/config-typescript' )(),
            require( '@easy-webpack/config-html' )(),

            require( '@easy-webpack/config-css' )
            ( { filename: 'styles.css', allChunks: true, sourceMap: false } ),

            require( '@easy-webpack/config-fonts-and-images' )(),
            require( '@easy-webpack/config-global-bluebird' )(),
            require( '@easy-webpack/config-global-jquery' )(),
            require( '@easy-webpack/config-global-regenerator' )(),
            require( '@easy-webpack/config-generate-index-html' )
            ( { minify: false } ),

            require( '@easy-webpack/config-copy-files' )
            ( { patterns: [ { from: 'favicon.ico', to: 'favicon.ico' } ] } ),

            require( '@easy-webpack/config-common-chunks-simple' )
            ( { appChunkName: 'app', firstChunk: 'aurelia-bootstrap' } )
        );
        break;
}

module.exports = config;

Answer 1

我不得不更改我的实际 api baseurl 以包含一些子路径...但我能够添加 devServer 代理配置，它不能满足我的要求，但可以解决我的问题。

case 'development':
    process.env.NODE_ENV = 'development';
    config = generateConfig(
        baseConfig,
        { devServer: { proxy: { '/v0/*': 'http://localhost:8080' } } },