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

Question

我正在尝试使用 Linux 上的 Visual Studio Code IDE 使用 vue.js、express.js 和 node.js 创建一个网络应用程序。根据一些在线文档，我读到在安装 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 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 中使用历史记录模式，则需要在每个子页面上都没有得到 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 应用程序，可以部署了!

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