时间戳

首页 > 解决方案 > 如何将 vue.js 客户端添加到现有的 node.js api？

node.js - 如何将 vue.js 客户端添加到现有的 node.js api？

问题描述

我有一个 node.js API，它有几个运行良好的端点。我创建了一个单独的 vue.js 客户端应用程序来使用我创建的 API 操作数据。这也很好用。我遇到了一个问题，我需要这些应用程序在同一个端口上运行，以便第三方代理系统可以同时访问这两个应用程序。

我已经看到了一种通过将 dist 目录复制到节点服务器来做到这一点的方法，但是由于我需要在生产环境中使用它，所以我需要一个在构建节点 API 时动态构建前端的替代方法。

添加客户端应用程序以在现有节点服务器上运行是否有生产级替代方案？任何建议或帮助将不胜感激！

更新：我已将此添加到我的路由器文件中，并在一个项目中拥有客户端和服务器

const path = require('path');
const router = express.Router();

router.use(express.static(path.join(__dirname, '../client/dist')));
   //production mode
if(process.env.NODE_ENV === 'production') {
  router.use(express.static(path.join(__dirname, '../client/dist')));
  //
router.get('/test', (req, res) => {
    res.sendFile(path.join(__dirname = '../client/dist/index.html'));
  })
}
//build mode
router.get('/test', (req, res) => {
  res.sendFile(path.join(__dirname+'../client/dist/index.html'));
})

标签： node.jsrestvue.jsserver

解决方案

您可以使用快速静态路由公开使用 vue-cli 构建的 dist 目录。该目录应该包含您构建的资产以及 index.html

app.use('/app', express.static(path.join(__dirname, '../client/dist'));

但是，现在由于您的应用程序不在根目录中，因此您必须向 vue.config.js 添加一个基本 url。在此之后重建应用程序。

 module.exports = {
   publicPath: process.env.NODE_ENV === 'production' ? '/app/' : '',
   ...
   ...
   ...
 }

现在您的 Vue 应用程序应该可以在

/app/index.html

推荐阅读