使用簡單的vue.js/webpack設置，如何配置dev服務器來代理除了幾個.js和.vue文件之外的所有內容？

因此，一些網站的當前設置的快速背景：使用簡單的vue.js/webpack設置，如何配置dev服務器來代理除了幾個.js和.vue文件之外的所有內容？

我公司的網站目前運行的CMS。所有頁面都通過CMS生成並路由，因此在任何地方都沒有.html文件。它都是通過razor（.cshtml），CMS作爲後端/數據存儲生成的，並且通過CMS處理路由。

如果取決於我，我會重寫整個事情，但我沒有那種奢侈。盡我所能儘可能用Vue.js + webpack前端重寫網站，並使用比現有技術更先進的技術逐漸重建該網站。

但是，我遇到了使用我們當前的配置設置Webpack開發服務器的問題。

我想我知道問題是什麼，但是我很難理解http-proxy-middleware的配置設置。

我相信我現在擁有一切設置的方式，開發服務器代理所有內容 - 因此不會對我修改的.vue/.js文件（通過熱重新加載）進行任何更改。

不幸的是，我必須代理大部分的網站（網頁[.cshtml文件]，遺留腳本，各種API等），但我不想代理MY .js文件和.vue文件（您可以假定我的任何東西都在/ dist /或/ src /中，其他所有的東西都是舊網站，並且必須通過「my.server」代理

另外，我把它設置爲通過vue cli的webpack - 簡單的配置 - 但我也可以通過非簡單的變化來設置它，如果需要的話。我從「簡單」開始到「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 
      } 
     }

顯然，「/」的目標是一切，但同時我可以找到大量的例子來說明如何代理具體章節而不是別的，我需要相反的東西。我需要代理EXCEPT/dist /和/ src /。任何幫助將不勝感激 - 誰知道，我可能會離開這裏，這甚至不是我的問題。

但是，最終，問題是當我運行開發服務器，如果我設置代理，網站上的所有內容除了我的.vue文件運行 - 如果我不代理服務器，除了我的.vue文件。因此，代理僅僅需要適用於傳統部分而不適用於vue部分 - 但是如果我遠離基礎，這是最終的問題，我願意接受任何形式的解決方案。

預先感謝任何人都可以提供的見解！

來源

2017-02-01 David Vasquez

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

使用簡單的vue.js/webpack設置，如何配置dev服務器來代理除了幾個.js和.vue文件之外的所有內容？

回答

相關問題