Node.js、Vue.js 和 Express.js 堆栈开发

Question

我将使用Visual Studio Code IDE在Linux上，通过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应用程序？

- JF0001

---

这个问题太笼统了，它取决于你要构建什么类型的应用程序以及你打算如何部署它。 - jonrsharpe

Answer 1

我建议先创建您的Vue应用程序，然后再手动添加Express内容，因为这一部分很快也很容易。

1. 从创建Vue应用程序开始

如果您按照Vue文档中的说明，使用vue-cli它会为您构建项目结构。

您的Vue源代码内容将存储在项目根目录下的src目录中。运行npm run build （相当于vue-cli-service build）后，将创建一个dist目录，其中包含构建好的客户端代码。

2. 添加Express

我建议将服务器端代码放在项目根目录下的新目录中，例如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（或者在你的 server 目录下给那个文件起另外的名字）。

你可能想把这个命令添加到你的 package.json 文件里...

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

如果你使用Heroku，确保你的所有依赖在你的package.json文件中都是正确的。然后，在你的根目录下创建一个名为Procfile的文件，其中包含以下内容：web: node ./server/main.js（或者你的服务器文件叫什么就写什么）。这样，你的vue应用程序就变成了一个Express vue应用程序，并且已经准备好部署了！

来源：我已经为自己的网站做过很多次这样的设置。

- Lissy93