众所周知我们是无法直接通过打开 vue 打包好的 dist 目录下的 index.html ,需要我们在本地开启一个服务器进行访问,这里分享一个node 开启本地服务器的方法, 首先我们需要在dist 外层目录新建一个 server.js 文件

var connectHistoryApiFallback = require('connect-history-api-fallback')
var express = require('express')

var app = require('express')()
var server = require('http').createServer(app)

server.listen(8888, function () {
  var host = server.address().address
  var port = server.address().port

  console.log('应用实例，访问地址为 http://%s:%s', host, port)
})
// 由js控制路由，一定要写在express.static前面！！！
app.use('/', connectHistoryApiFallback())
app.use(express.static('./dist'))

app.get('/', function (req, res) {
  // eslint-disable-next-line no-path-concat
  res.sendFile(__dirname + '/index.html')
})

然后在当前目录下打开命令行工具 输入 node serve.js
如果成功打印访问地址那么就可以正常访问了

其中

app.use('/', connectHistoryApiFallback())

是为了解决当页面应用刷新后页面丢失的问题, 我们配置这个之后就不用担心了