node.js、vue.js 和express.js 堆栈开发

Question

我正在尝试使用 Linux 上的 Visual Studio Code IDE 使用 vue.js、express.js 和 node.js 创建一个 Web 应用程序。根据网上的一些文档，我读到安装 vue.js 后，可以使用以下命令创建一个vue.js 应用程序：

vue create my-app

根据其他文档，据说可以通过执行以下命令创建一个express.js应用程序：

express myExpressApp

如何创建一个应用程序，我将使用 VS Code IDE 开发该应用程序，该应用程序既是vue.js 应用程序又是express.js 应用程序？

Answer 1

我建议首先创建你的 vue 应用程序。手动添加 Express 内容，因为这一点既快速又简单。

1. 首先创建你的 vue 应用程序

如果您遵循此处的 vue 文档，使用 vue-cli 它将为您构建一切

vue 源代码的内容将位于src项目根目录中的目录中。运行后npm run build（与 相同vue-cli-service build）dist，将创建一个目录，其中包含构建的客户端代码。

2.添加快递

我建议将服务器端代码放在项目根目录中的一个新目录中，server然后在该目录中创建一个文件，并添加以下代码...

const express = require('express');
const history = require('connect-history-api-fallback');
const path = require('path');

require('dotenv').config()

const app = express();

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

// Serve up built vue app, at the main root
const staticFileMiddleware = express.static(path.join('dist'));
app.use(staticFileMiddleware);
app.use(history({
  disableDotRule: true,
  verbose: true
}));
app.use(staticFileMiddleware);


// Make all public assets available 
app.use('/public', express.static('public'))

// App has started
app.listen(port, () => 
    console.log(`Awesome app has started and is running on port ${port} `)
);

对于上面的示例，您将需要几个依赖项yarn add express connect-history-api-fallback dotenv（或使用 npm）。

• express显然需要
• connect-history-api-fallback dotenv如果你在vue中使用history模式，则需要不要在每个子页面上都出现404。
• 并且dotenv，只是从文件中读取常量的一个好方法.env，您还应该创建该常量

最后要运行它，请键入node server/main（或您在服务器目录中调用该文件的任何内容）。

您可能希望将该命令添加到您的 package.json 中。

 "scripts": {
    "start": "node server/main",
     ...

如果您使用 Heroku，请仔细检查您的 中的所有依赖项是否正确package.json，然后Procfile在您的根目录中创建一个名为的文件，其中包含以下内容web: node ./server/main.js（或您的服务器文件的名称），然后，您的 vue 应用程序现在是一个 Express vue 应用程序，并准备部署！

资料来源：我已经为自己的网站多次完成此设置。