我建议先创建您的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;
const staticFileMiddleware = express.static(path.join('dist'));
app.use(staticFileMiddleware);
app.use(history({
disableDotRule: true,
verbose: true
}));
app.use(staticFileMiddleware);
app.use('/public', express.static('public'))
app.listen(port, () =>
console.log(`Awesome app has started and is running on port ${port} `)
);
你需要安装一些依赖项,对于上述示例,你将需要执行 yarn add express connect-history-api-fallback dotenv
命令 (或使用 npm)。
最后,运行命令 node server/main
(或者在你的 server 目录下给那个文件起另外的名字)。
你可能想把这个命令添加到你的 package.json 文件里...
"scripts": {
"start": "node server/main",
...
如果你使用Heroku,确保你的所有依赖在你的
package.json
文件中都是正确的。然后,在你的根目录下创建一个名为
Procfile
的文件,其中包含以下内容:
web: node ./server/main.js
(或者你的服务器文件叫什么就写什么)。这样,你的vue应用程序就变成了一个Express vue应用程序,并且已经准备好部署了!
来源:我已经为自己的网站做过很多次这样的设置。