标签：npm Vue hash app express && history

 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     }

标签：npm,Vue,hash,app,express,&&,history
来源： https://www.cnblogs.com/watermeloncode/p/16466272.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。