首页 文章

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

提问于
浏览
0

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

我公司的网站目前使用的是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”开始到“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
          }
        }

显然'/'是针对一切的,但是虽然我可以找到很多关于如何代理特定部分而不是其他任何部分的例子,但我需要相反的 . 我需要代理所有EXCEPT / dist /和/ src / . 任何帮助将不胜感激 - 谁知道,我可能离开这里,这甚至不是我的问题 .

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

提前感谢任何人都能提供的见解!

1 回答

相关问题