我的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;
答案 0 :(得分:1)
我不得不改变我的实际api baseurl以包含一些子路径......但是我能够添加devServer代理配置,它不能解决我的问题,但解决了我的问题。
case 'development':
process.env.NODE_ENV = 'development';
config = generateConfig(
baseConfig,
{ devServer: { proxy: { '/v0/*': 'http://localhost:8080' } } },