时间戳

首页 > 解决方案 > 部署 VueJS 应用程序 - 后端 (ExpressJS) 没有响应

node.js - 部署 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 serve）这个来启动 Vue 应用程序：

 serve -s server/public

我错过了什么？感觉很近，但还没有雪茄……

标签： node.jsexpressvue.js

解决方案

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

推荐阅读