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服务器可以热重建打字稿。

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

我正在添加

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中使用这些？

update 我注意到webpack dev服务器有一个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' } } },

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

1 个答案: