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 进行开发，该 IDE 既是 vue.js 应用又是 express.js 应用？

Answer 1

我建议先创建您的 vue 应用程序。手动添加 Express 的东西，因为那一点又快又容易。

1。首先创建你的 vue 应用

如果你关注vue documentation here，使用 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 应用，可以部署了！

资料来源：我已经为自己的网站做了很多次这种设置。