一些快速背景：
我公司的网站运行一个 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 文件？