我正在尝试使用 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 应用程序?
最佳答案
我建议先创建您的 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 应用程序,可以部署了!
资料来源:我已经为自己的网站完成了很多次此设置。
关于node.js、vue.js 和 express.js 堆栈开发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55882686/