webpack-dev-middleware 不为我的客户端服务

Question

我在服务器端有一个nodejs应用程序，在客户端有一个vue应用程序

我希望我的服务器端在访问某些 url 时为我的客户端提供服务(例如"/"(

我的客户端处于project_root/frontend状态，我的服务器处于project_root/server

这是我server/app.js文件：

const webpackConfig = require('./webpack.config.js')
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const compiler = webpack(webpackConfig);
const app = express();
if(process.env['FUNDME_DEV']) {
app.use(webpackMiddleware(compiler, {
publicPath: path.join(__dirname, '/../frontend/dist')
}))
} else {
//production
app.use(express.static(path.join(__dirname, '/../frontend/dist')));
}
app.listen(port, () => {
console.log(`server started, listening on port ${port}`)
})

我的 webpack.config.js 文件主要是猜测和复制 vue-cli 在我创建前端时为我制作的文件，所以它可能是错误的，但是在开发模式下运行服务器时的输出 (export FUNDME_DEV=1( 说它编译成功。

但是，当我尝试访问我的应用程序时，我得到"无法获取/"，中间件没有任何:(

我不知道我错过了什么，或者我的 webpack 配置应该是什么样子，我发现其他类似的问题都没有帮助。

我应该怎么做？

Answer 1

const webpackConfig = require('./webpack.config.js')
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const compiler = webpack(webpackConfig);
const app = express();
if(process.env.NODE_ENV === 'development') { // you don't have to compile the content first, just start this as dev.
app.use(webpackMiddleware(compiler, {
publicPath: '/' // <--- this has to be the same publicPath that you inserted on your webpack config, otherwise you could leave this as /
}))
} else {
//production
app.use(express.static(path.join(__dirname, '/../frontend/dist')));
}
app.listen(port, () => {
console.log(`server started, listening on port ${port}`)
})