问题
So some quick background on the site's current setup:
My company's site currently runs off of a CMS. All pages are generated and routed via the CMS, so there are no .html files anywhere. It's all generated via razor (.cshtml), the CMS as a backend/data-store, and routing is handled through the CMS.
If it were up to me I'd rewrite the entire thing, but I don't have that luxury. I'm doing my best to rewrite the site with a Vue.js + webpack front-end wherever possible and slowly rebuild this site over time using more modern techniques than are currently implemented.
However, I'm running into a problem setting up Webpack's dev server with our current configuration.
I think I know what the problem is, however I'm having difficulty understanding the http-proxy-middleware's configuration settings.
I believe the way I currently have everything setup, the dev server is proxying everything - therefore not picking up any changes I make to the .vue/.js files I modify (via hot reloading).
Unfortunately I HAVE to proxy the majority of the site (pages [.cshtml files], legacy scripts, various APIs, etc.), however I don't want to proxy MY .js files and .vue files (you can assume anything of mine is in /dist/ or /src/. Everything else is the old site and must be proxied via "my.server".
Additionally, I set this up as a quick test via vue cli's webpack-simple configuation - however I can also set it up via the non-simple variation if needed. I started with "-simple" to "K.I.S.S" (Keep it simple stupid) and slowly layer on the complexity as desired.
Here's my webpack.config.js file as it currently stands:
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
})
])
}
As far as I can tell the issue lies in the proxy:
proxy: {
'/': {
target: {
"host": "my.server",
"protocol": 'http:',
"port": 80
},
ignorePath: false,
changeOrigin: true,
secure: false
}
}
Obviously the '/' is targeting everything, but while I can find plenty of examples of how to proxy specific sections and not anything else, I need the opposite. I need to proxy everything EXCEPT /dist/ and /src/. Any help would be greatly appreciated - and who knows, I may be way off here and this isn't even my problem.
Ultimately, though, the issue is when I run the dev server, if I setup proxying, everything on the site runs except my .vue files - if I don't proxy the server, nothing runs except my .vue files. Therefore it stands to reason the proxying simply needs to be applied to the legacy portions only and not the vue portions - but if I'm way off base, that's the ultimate issue and I'm open to solutions of any kind.
Thanks in advance for any insight anyone can provide!
回答1:
webpack-dev-server allows you to configure multiple proxy configurations.
Using this style of configuring the proxy will give access to more advanced context filtering via the context option.
You can use globbing:
proxy: [{
context: ['**', '!/src/**', '!/dist/**', '!**/*.vue'],
target: {
"host": "my.server",
"protocol": 'http:',
"port": 80
},
ignorePath: false,
changeOrigin: true,
secure: false
}]
Or you can write your own filtering logic.
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
}]
sources:
- https://github.com/chimurai/http-proxy-middleware#context-matching
- 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
来源：https://stackoverflow.com/questions/41989185/using-a-simple-vue-js-webpack-setup-how-does-one-configure-the-dev-server-to-pr