使用简单的 vue.js/webpack 设置，如何配置开发服务器来代理除少数 .js 和 .vue 文件之外的所有内容？

Question

关于网站当前设置的一些快速背景知识：

我公司的网站目前运行没有 CMS。所有页面都是通过 CMS 生成和路由的，因此任何地方都没有 .html 文件。都是通过 razor (.cshtml) 生成的，CMS 作为 backend/data-store，路由是通过 CMS 处理的。

如果由我来决定，我会重写整个内容，但我没有那么奢侈。我正在尽最大努力用 Vue.js + webpack 前端重写网站，并随着时间的推移使用比目前实施的更现代的技术慢慢重建这个网站。

但是，我运行在使用当前配置设置 Webpack 的开发服务器时遇到了问题。

我想我知道问题出在哪里，但是我很难理解 http-proxy-middleware 的配置设置。

我相信我目前设置所有内容的方式，开发服务器正在代理所有内容 - 因此不会获取我对修改的 .vue/.js 文件所做的任何更改（通过热重载）。

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

代理

此外，我通过 vue cli 的 webpack-simple 配置将其设置为快速测试 - 但如果需要，我也可以通过非简单变体进行设置。我从“-simple”开始到 "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/ 之外的所有内容。任何帮助将不胜感激 - 谁知道，我可能离这里很远，这甚至不是我的问题。

但最终，问题是当我运行开发服务器时，如果我设置代理，网站上的所有内容运行除了我的 .vue 文件 - 如果我不代理服务器，除了我的 .vue 文件外什么都没有运行s。因此，代理只需要应用于遗留部分而不是 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
}]

来源：

使用简单的 vue.js/webpack 设置，如何配置开发服务器来代理除少数 .js 和 .vue 文件之外的所有内容？

Using a simple vue.js/webpack setup, how does one configure the dev server to proxy everything EXCEPT a few .js and .vue files?

razor

webpack

vue.js

webpack-dev-server

http-proxy-middleware