您如何配置 Webpack 开发服务器以在通过不同的服务器运行站点的其余部分时为特定文件夹提供服务？

Question

一些快速背景：

我公司的站点运行 CMS，由 CMS 处理所有路由。没有 html 文件，只有 razor 文件 (.cshtml)。虽然从头开始重做网站是我更喜欢做的，但这不是一种选择，所以我试图通过逐页将 vue.js 与 webpack 开发工作流逐页集成来慢慢地使网站现代化基础。

我花了大量时间设置 webpack，使其只能处理 /dist/ 文件夹中的文件 - 其他所有内容都通过http://my.server/ 提供服务，并由 CMS 和后端处理。

通过反复试验，我设法在 /dist/ 文件夹中获取 webpack-dev-server 服务文件，同时允许服务器的其余部分提供其他所有内容（通过http://my.server/）。不幸的是，这仅在 webpack-dev-server 部分的文件路径特别引用“ http://localhost:8080/ ”时才有效，这显然是不可接受的。

开发环境代码必须与生产环境代码完全一样，因此<script src="http://localhost:8080/dist/build.js"></script>是不可接受的。

但是，如果我只是编写<script src="/dist/build.js"></script>服务器将<script src="http://my.server/dist/build.js"></script>其解析为显然不正确并导致 404（因为这些文件仅从开发服务器提供）。

我的问题是，“如何配置 webpack-dev-server 以从自身提供 /dist/ 文件夹中的所有内容，同时允许通过“ http://my.server ”提供站点上的所有其他内容？

这是我的 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: {
    publicPath: '/dist/',
    historyApiFallback: true,
    noInfo: 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
    }]
  },
  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
    })
  ])
}

虽然可能没有必要回答这个问题，但如果您想要更多背景知识，我的初始问题（以及该问题的解决方案）位于此处： 使用简单的 vue.js/webpack 设置，如何配置开发服务器以代理所有内容除了几个 .js 和 .vue 文件？

Answer 1

更改 webpack 配置的 publicPath: '/dist/' 以匹配您的实际产品路径，然后更改 index.html 中的脚本 SRC 以指向新的公共路径.. 即基本上是虚拟路径...不一定需要存在在实际文件系统上..我在我的项目中实现了相同的目标..