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

 1 # 一、Vue路由器的两种工作模式
 2 #    1.对于一个uri来说，什么是hash值？    井号及其后面的内容就是hash值。
 3 #    2.hash值不会包括含在HTTP请求中，即：hash值不会带给服务器（只是前端浏览器自己使用）。
 4 #    3.hash模式：
 5 #        .地址中永远带井号，不美观。
 6 #        .若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
 7 #        .兼容性好
 8 #    4.history模式：
 9 #        .地址干净，美观
10 #        .针对一些老的浏览器hash兼容性比history高
11 #    .应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
12 #
13 #    5.Vue中路由器配置hash、history模式（默认hash）。
14     const router = new VueRouter({
15         mode: 'history', # 默认是hash
16         routes:[...]
17     })
18 # 二、Vue项目编译成html、css、js项目包
19 #    1.vue编译（编译后生成的html、css、js在dist文件夹下。将该服务器部署在你的服务器上去就行）
20     npm run build
21 #    2.创建一个文件夹，并用npm init初始化它
22     npm init
23 #    3.安装express
24     npm i express
25 #    4.安装一个node后台工具来解决hash井号问题 https://www.npmjs.com/package/connect-history-api-fallback
26     npm i connect-history-api-fallback
27 #    5.新建server.js
28     const express = require('express');
29     const history = require('connect-history-api-fallback')
30
31     const app = express();
32     app.use(history()); // 这是解决Vue中的history模式刷新报404错的问题
33     app.use(express.static(__dirname+'/static')); // 设置默认访问地址，这样你只要把你编译好的dist文件夹内容copy过来就部署好了
34
35     app.get('/person', (req, res)=>{
36         res.send({
37         name: 'tom',
38         age: 18
39         });
40     });
41
42     app.listen(5005, (err)=>{
43         if(!err) {console.log('服务器启动成功了！')}
44     })
45 #    6.启动服务器（提示启动成功了，你就可以访问localhost:5005/person）
46     node server
47 # 三、如果你想通过Nginx去解决Vue的history模式问题，在Nginx中你可以这样配置。
48     location / {
49         root /home/paracool/html;
50         try_files $uri $uri/ /index.html;
51     }