1

因此,网站当前设置的一些快速背景:

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

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

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

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

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

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

此外,我通过 vue cli 的 webpack-simple 配置将其设置为快速测试 - 但是如果需要,我也可以通过非简单变体进行设置。我从“-simple”开始到“KISS”(保持简单愚蠢),然后根据需要慢慢增加复杂性。

这是我目前的 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 文件之外什么都不会运行。因此,理所当然地,代理只需要应用于遗留部分而不是 vue 部分 - 但如果我偏离基础,那是最终问题,我愿意接受任何类型的解决方案。

提前感谢任何人可以提供的任何见解!

4

1 回答 1

2

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

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

您可以使用通配符:

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

来源:

于 2017-02-01T22:47:47.700 回答