vue-cli项目部署（Express）

当我们完成了一个Vue-cli项目，我们当然是非常开心，然后想将其发布。

那么我们就使用build命令，把我们的项目编译打包：

$ npm run build

打包了之后，我们发现我们得到了一个dist文件夹，不知道怎么启动整个项目。

这时我们又打开了官方文档，看到里面有这么一条：

dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值)，所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器，例如 serve：

npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题
serve -s dist

也就是说，只要写一个静态文件服务器就行了。如果我们有个后端，例如Express，那么我们直接使用

app.use(express.static(path.join(__dirname, 'dist')));

就可以做到了。但是这里还有一个问题，那就是我们可能会发现页面有些路由失效了。原因官网也解释了一下：

如果你在 history 模式下使用 Vue Router，是无法搭配简单的静态文件服务器的。例如，如果你使用 Vue Router 为 /todos/42/ 定义了一个路由，开发服务器已经配置了相应的 localhost:3000/todos/42 相应，但是一个为生产环境构建架设的简单的静态服务器会却会返回 404。

这时。我们有个简单的解决方法，就是使用connect-history-api-fallback这个中间件。

官网的教程非常详细而且简单。

使用npm安装：

$ npm install --save connect-history-api-fallback

导入中间件和使用：

// 导入数据包
var history = require('connect-history-api-fallback');

// 使用
var connect = require('connect');

var app = connect()
  .use(history())
  .listen(3000);

// 或者：

var express = require('express');

var app = express();
app.use(history());

大功告成！