部署VueJS应用-后端ExpressJS无响应

问题描述

这是我第一次部署VueJS应用。它是完整堆栈，后端是Express / MySQL。在开发人员模式下一切运行良好。我的开发平台是Windows 10，VS Code。

我目前正在尝试使用本地网络服务器在开发PC上预览应用程序。

为此，我将Vue应用程序构建为服务器/公共服务器。静态站点可以正常运行，但是我似乎无法让Express后端从应用程序或直接访问api的浏览器进行响应。我遵循了Brad Traversy教程中的模型，这是vue.config.js的样子：

const path = require('path');

module.exports = {
  outputDir: path.resolve(__dirname,'./server/public'),devServer: {
    disableHostCheck: true,proxy: {
      '/api': {
        target: 'http://localhost:5000'
      }
    }
  },transpileDependencies: ['vuetify'],pluginOptions: {
    i18n: {
      locale: 'en',fallbackLocale: 'en',localeDir: 'locales',enableInSFC: false,},};

这是Express /后端的index.js。我注释掉了NODE_ENV测试，因为我还没有弄清楚如何正确设置它。这应该只是硬编码要在生产模式下运行的代码。 __dirname指向服务器目录，其中包含Express代码和其他服务器内容。

// Create express app
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
//Create Express App
const app = express();
// Add Middleware
app.use(bodyParser.json());
app.use(cors());
// 
const water = require('./routes/api/water');
const waterlog = require('./routes/api/waterlog');
// Direct /api
app.use('/api/water',water);
app.use('/api/waterlog',waterlog);
// Handle production
// if (process.env.NODE_ENV === 'production') {
  // Static folder
  app.use(express.static(__dirname + '/public/'));
  // Handle SPA
  app.get(/.*/,(req,res) => res.sendFile(__dirname + '/public/index.html'));
// }

const port = process.env.PORT || 5000;

app.listen(port,() => console.log(`CORS-EnabledServer started on port ${port}`));

我使用（从npm服务）启动Vue应用程序：

 serve -s server/public 

我想念什么？感觉非常接近，但还没有雪茄...

解决方法

serve只是一个简单的静态HTTP服务器。它不会运行您的后端。

您的生产版本会将您的前端资产放入Express应用程序的静态服务目录中，因此在构建前端之后您需要做的就是启动服务器

# Build your front-end
npm run build

# Start your Express server,assuming this is configured in package.json
NODE_ENV=production npm start

现在在浏览器中打开http://localhost:5000/

另请参阅https://expressjs.com/en/advanced/best-practice-performance.html#set-node_env-to-production