Vue路由器的hash和history两种工作模式 && Vue项目编译部署

# 一、Vue路由器的两种工作模式
#    1.对于一个uri来说，什么是hash值？    井号及其后面的内容就是hash值。
#    2.hash值不会包括含在HTTP请求中，即：hash值不会带给服务器（只是前端浏览器自己使用）。
#    3.hash模式：
#        .地址中永远带井号，不美观。
#        .若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
#        .兼容性好
#    4.history模式：
#        .地址干净，美观
#        .针对一些老的浏览器hash兼容性比history高
#    .应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
#
#    5.Vue中路由器配置hash、history模式（默认hash）。
    const router = new VueRouter({
        mode: 'history', # 默认是hash
        routes:[...]
    })
# 二、Vue项目编译成html、css、js项目包
#    1.vue编译（编译后生成的html、css、js在dist文件夹下。将该服务器部署在你的服务器上去就行）
    npm run build
#    2.创建一个文件夹，并用npm init初始化它
    npm init
#    3.安装express
    npm i express
#    4.安装一个node后台工具来解决hash井号问题 https://www.npmjs.com/package/connect-history-api-fallback
    npm i connect-history-api-fallback
#    5.新建server.js
    const express = require('express');
    const history = require('connect-history-api-fallback')

    const app = express();
    app.use(history()); // 这是解决Vue中的history模式刷新报404错的问题
    app.use(express.static(__dirname+'/static')); // 设置默认访问地址，这样你只要把你编译好的dist文件夹内容copy过来就部署好了

    app.get('/person', (req, res)=>{
        res.send({
        name: 'tom',
        age: 18
        });
    });

    app.listen(5005, (err)=>{
        if(!err) {console.log('服务器启动成功了！')}
    })
#    6.启动服务器（提示启动成功了，你就可以访问localhost:5005/person）
    node server
# 三、如果你想通过Nginx去解决Vue的history模式问题，在Nginx中你可以这样配置。
    location / {
        root /home/paracool/html;
        try_files $uri $uri/ /index.html;
    }