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

因此，请快速了解网站当前的设置：

我公司的网站目前使用CMS。所有页面都是通过CMS生成和路由的，因此任何地方都没有.html文件。它都是通过razor（.cshtml）生成的，CMS作为后端/数据存储，路由是通过CMS处理的

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

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

我想我知道问题是什么，但是我很难理解http代理中间件的配置设置

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

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

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

但最终的问题是，当我运行dev服务器时，如果我设置代理，站点上的所有内容都会运行，除了我的.vue文件-如果我不代理服务器，除了我的.vue文件外，其他内容都不会运行。因此，代理只需应用于遗留部分，而不应用于vue部分，这是理所当然的。但是，如果我偏离了基准，这是最终的问题，我愿意接受任何形式的解决方案

---

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

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
}]

资料来源：

---

Chimurai：感谢您的全面回复。这正好回答了我的问题。不幸的是，它没有解决我的问题，我也不太清楚原因。我的build.js文件在通过webpack dev server从内存提供服务时总是404不存在，即使您做了更改。如果我运行一个构建，从而创建了物理文件，它也会像expe一样工作反恐执行局，但在没有新的生产版本的情况下，对文件进行更改不会返回任何更新。我不明白为什么这不能通过开发服务器工作，但作为生产版本却很好。好的，我发现了我的错误。我发现热文件实际上是从正确的位置提供的。当将razor文件更改为它时但是这显然不是链接文件的正确方法。有没有一种方法可以让dev server像读取“my.server”文件一样读取这些文件？或者让服务器知道这些是从本地主机加载的：默认情况下是8080，并像从本地主机加载一样加载它们，而不修改html本身中的域？Chimurai，当我的问题仍然存在时，您确实回答了我原来的问题，所以我将此答案标记为正确。我发布了另一个问题，这是解决了我遇到的新问题，希望有比我更了解这方面的人能帮助我找到解决方案。再次感谢您的所有输入和文档！如果有兴趣，这里有一个新问题：不确定如何为您的设置正确配置WDS；但作为解决方案，您可以添加代理配置程序将请求路由到

/dist

请求到

http://localhost:8080

。。。