Vue 路由模式为history下打包本地启动以及部署上线如何配

1.路由模式为hash(默认)
打包时需要注意配置文件下的assetsPublicPath

2.路由模式为history
本地打包之后本地启动
我们使用node.js启动本地服务器运动打包项目

新建server.js

var express = require('express');

const app = express();

let history = require('connect-history-api-fallback')

//重定向到index.html
history({
  rewrites: [{
      from: /^\/libs\/.*$/,
      to: '/index.html'
    }]
});

app.use(history());

app.use(express.static('./dist'));

app.listen('8088',()=>{
    console.log('服务器启动')
})

因为我们路由模式为history 所以我们打开localhost:8088，访问非主页时页面提示Cannot GET /xxx 这是因为：

你访问http://localhost:8088时，静态服务器（这里是nginx）会默认去目标目录（这里为location中root所指定的目录）下寻找index.html（这是nginx在端口后没有额外路径时的默认行为），目标目录下有这个文件吗？有！然后静态服务器返回给你这个文件，配合vue-router进行转发，自然可以（部分）正常显示。
但如果直接访问http://localhost:8088/home，静态服务器会去目标目录下寻找home文件，目标目录下有这个文件吗？没有！所以自然就404了。

我们这里添加上面的connect-history-api-fallback，当页面访问错误的时候自动重定向到index.html。

如果是部署到服务器上，我们可以配置nginx。
因为在history 模式下，只是动态的通过js 操作window.history 来改变有浏览器地址栏里的路径，并没有发起http请求，但当你直接 在浏览器里输入这个地址的时候 就一定要先对服务器放起http请求，但是这个目标在服务器上又不存在所以就返回了404了，怎么解决呢，就是把所有的请求全部转发到http://www.xxx.com/hot/index.hmtl上就可以了

location / {
  try_files $uri $uri/ /index.html;
}