使用一个简单的vue.js/webpack设置，如何配置dev服务器来代理除了一些.js和.vue文件之外的所有内容

Question

因此，网站当前设置的一些快速背景：

我公司的网站目前没有CMS。所有页面都是通过CMS生成和路由的，所以任何地方都没有.html文件。这一切都是通过razor(.cs.html)生成的，CMS作为后端/数据存储，路由通过CMS处理。

如果由我决定，我会重写整件事，但我没有那种奢侈。我正在尽我所能用Vue.js+webpack前端重写网站，并使用比目前更现代的技术慢慢重建这个网站。

然而，我在使用当前配置设置Webpack的开发服务器时遇到了一个问题。

我想我知道问题出在哪里，但是我很难理解http代理中间件的配置设置。

我相信，按照我目前设置一切的方式，开发服务器正在代理一切，因此不会接收我对修改的.vue/.js文件所做的任何更改(通过热重新加载)。

不幸的是，我必须代理大部分网站(页面[.cshtml文件]、遗留脚本、各种API等)，但我不想代理我的.js文件和.vue文件(你可以假设我的任何文件都在/dist/或/src/中。其他都是旧网站，必须通过"MY.server"代理。

此外，我通过vue-cli的webpack简单配置将其设置为快速测试，但如果需要，我也可以通过非简单变体进行设置。我从"-简单"到"K.I.S.S"(保持简单愚蠢)，然后根据需要慢慢地增加复杂性。

这是我目前的webpack.config.js文件：

var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this nessessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true,
proxy: {
'/': {
target: {
"host": "my.server",
"protocol": 'http:',
"port": 80
},
ignorePath: false,
changeOrigin: true,
secure: false
}
}
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}

据我所知，问题在于代理：

proxy: {
'/': {
target: {
"host": "my.server",
"protocol": 'http:',
"port": 80
},
ignorePath: false,
changeOrigin: true,
secure: false
}
}

显然，"/"针对的是所有内容，但尽管我能找到很多关于如何代理特定部分而不是其他内容的例子，但我需要相反的例子。我需要代理除/dist/和/src/之外的所有内容。任何帮助都将不胜感激——谁知道呢，我可能离这里很远，这甚至不是我的问题。

不过，最终的问题是，当我运行dev服务器时，如果我设置了代理，除了我的.vue文件之外，网站上的所有东西都会运行——如果我不代理服务器，那么除了我的.wue文件之外什么都不会运行。因此，代理只需要应用于遗留部分，而不应用于vue部分，这是理所当然的——但如果我偏离了基础，那就是最终问题，我对任何类型的解决方案都持开放态度。

提前感谢任何人提供的任何见解！

Answer 1

webpack-dev-server允许您配置多个代理配置。

使用这种配置代理的风格，可以通过context选项访问更高级的上下文过滤。

您可以使用globbing:

proxy: [{
context: ['**', '!/src/**', '!/dist/**', '!**/*.vue'],
target: {
"host": "my.server",
"protocol": 'http:',
"port": 80
},
ignorePath: false,
changeOrigin: true,
secure: false
}]

或者您可以编写自己的过滤逻辑。

proxy: [{
context: function(pathname, req) {
// exclude /src/ and /dist/
return !pathname.match("^/(src|dist)/");
},
target: {
"host": "my.server",
"protocol": 'http:',
"port": 80
},
ignorePath: false,
changeOrigin: true,
secure: false
}]

来源：

• https://github.com/chimurai/http-proxy-middleware#context-匹配
• https://github.com/webpack/webpack-dev-server/issues/562#issuecomment-241736936
• https://github.com/webpack/webpack-dev-server/blob/ee9181ca3ae40d35f8e419123423df51f2f40700/examples/proxy-hot-reload/webpack.config.js#L4