Используя простую настройку vue.js/webpack, как сконфигурировать сервер dev для прокси всего, кроме нескольких файлов.js и.vue?

Итак, краткий обзор текущих настроек сайта:

На сайте моей компании в настоящее время используется CMS. Все страницы генерируются и маршрутизируются через CMS, поэтому нигде нет файлов.html. Все это генерируется с помощью бритвы (.cshtml), CMS в качестве бэкэнда / хранилища данных, а маршрутизация осуществляется через CMS.

Если бы это зависело от меня, я бы все переписал, но у меня нет такой роскоши. Я делаю все возможное, чтобы переписать сайт с помощью веб-интерфейса Vue.js +, где это возможно, и постепенно перестраивать этот сайт с течением времени, используя более современные методы, чем реализовано в настоящее время.

Однако я столкнулся с проблемой при настройке dev-сервера Webpack с нашей текущей конфигурацией.

Я думаю, что знаю, в чем проблема, однако мне трудно понять параметры конфигурации http-proxy-middleware.

Я верю в то, как у меня сейчас все настроено, сервер dev все проксирует - поэтому не получает никаких изменений, которые я делаю в изменяемых файлах.vue /.js (через горячую перезагрузку).

К сожалению, у меня есть прокси-сервер для большей части сайта (страницы [.cshtml файлы], устаревшие скрипты, различные API и т. Д.), Однако я не хочу прокси-файлы MY .js и.vue (вы можете предполагать что-либо из Мой находится в /dist/ или /src/. Все остальное - старый сайт и должен быть прокси через "my.server".

Кроме того, я настроил это как быстрый тест через простую конфигурацию vue cli в webpack- однако я также могу настроить его с помощью непростого варианта, если это необходимо. Я начал с "-простой" до "ПОЦЕЛУЙ" (пусть это будет просто глупо) и медленно наложил слой на сложность по желанию.

Вот мой файл 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. Поэтому очевидно, что прокси просто необходимо применять только к устаревшим частям, а не к частям - но если я далеко от базы, это конечная проблема, и я открыт для любых решений.

Заранее спасибо за любую информацию, которую может предоставить каждый!

Источник

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

источники:

Источник
Другие вопросы по тегам