本来想在Netlify上部署网站的，结果无论如何都没办法重定向到github，并且总是网页无法打开，就转用heroku了。

Vue-CLI项目部署

参考链接

VueCLI官方给出的部署教程

BinarCode上的部署教程

Heroku官方基于Heroku CLI的Node.js应用部署文档

StackOverflow上比较好的回答1

StackOverflow上比较好的回答2

部署操作

需要在heroku上创建账号，创建app。在进入app后有一排工具栏，可以查看对应的信息。

Deploy一栏是初次部署的时候显示的页面，在这里关联github的特定项目。

Activity一栏可以查看build log，如果部署不成功需要去查找错误。

Settings一栏可以配置环境变量。在vue3-demo3中用到了.env配置环境变量，需要在部署的时候添加到heroku去。

如果部署中出现报错npm ERR! missing script: start，意思是在package.json中没有找到start相关的script，因为vue-cli默认只有serve/build/lint。这时需要自定义start脚本的内容。

这里涉及一些npm脚本的知识。掘金上关于npm的知识点汇总

npm脚本常用的几个缩写分别是：

npm start short for npm run start

npm test short for npm run test

npm stop short for npm run stop

如下，当执行npm run start指令的时候，实际上执行的就是start在scripts中的脚本 node server.js。

第一个指令缩写可以解释为什么create-react-app中运行指令是npm start了。

在脚手架的package.json文件中添加"start": "node server.js",指令，如下：

这个指令的意思是在node环境下执行server.js文件。server.js文件是需要在当前应用文件夹的最顶层，和package.json处于同一级的自建文件。

// server.js
const express = require("express");
const history = require("connect-history-api-fallback");
const serveStatic = require("serve-static");
const enforce = require("express-sslify");
// require()中涉及的字符串都是需要预先安装的npm包

const app = express();//该app使用express

app.use(enforce.HTTPS({ trustProtoHeader: true })); // 要求使用http链接
app.use(serveStatic(__dirname + "/dist"));
// 要求部署的最终代码都放在heroku生成的__dirname下的dist文件夹中
app.use(history());
app.listen(process.env.PORT || 5000);