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 documentation here，则使用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，但要求不要在每个子页面上获取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应用，可以部署了！

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

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

1 个答案:

1。首先创建您的vue应用

2。加入Express