使用简单的 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?

问题描述

关于网站当前设置的一些快速背景:

So some quick background on the site's current setup:

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

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.

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

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.

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

However, I'm running into a problem setting up Webpack's dev server with our current configuration.

我想我知道问题是什么，但是我很难理解 http-proxy-middleware 的配置设置.

I think I know what the problem is, however I'm having difficulty understanding the http-proxy-middleware's configuration settings.

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

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).

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

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".

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

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.

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

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

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

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.

但最终，问题是当我运行开发服务器时，如果我设置代理，站点上的所有内容都会运行，但我的 .vue 文件除外 - 如果我不代理服务器，则除了我的 .vue 文件之外什么都不会运行.因此，代理只需要应用于遗留部分而不是 vue 部分是合理的 - 但如果我偏离基础，那是最终问题，我愿意接受任何类型的解决方案.

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!

推荐答案

webpack-dev-server 允许你配置多个代理配置.

webpack-dev-server allows you to configure multiple proxy configurations.

使用这种配置代理的方式将允许通过 context 选项访问更高级的上下文过滤.

Using this style of configuring the proxy will give access to more advanced context filtering via the context option.

您可以使用通配符:

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

来源:

• https://github.com/chimurai/http-proxy-middleware#上下文匹配
• 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

这篇关于使用简单的 vue.js/webpack 设置，如何配置开发服务器以代理除少数 .js 和 .vue 文件之外的所有内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！