代码之家 › 专栏 › 技术社区 › Tom Klino

webpack开发中间件不为我的客户端服务

webpack-dev-middleware webpack-dev-server webpack node.js

0

Tom Klino · 技术社区 · 8 年前

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

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为我创建的文件复制,因此可能是错误的,但是在dev模式下运行服务器时的输出( export FUNDME_DEV=1

然而,当我尝试访问我的应用程序时,我得到的是“Cannot GET/”,中间件没有任何作用:(

我不知道我遗漏了什么,也不知道我的webpack配置应该是什么样子的,我发现其他类似的问题都没有帮助。

1 回复 | 直到 8 年前

1

0

PlayMa256 8 年前

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}`)
})