本篇讲解前端项目的路由模式(以vue-router为例),以及history模式下的项目部署问题。
vue-router
的路由模式可以通过指定mode
属性值控制,可选值:“hash” 、“history”、 “abstract” , 默认:“hash” (浏览器环境) , “abstract” (Node.js 环境)
const router = new VueRouter({
mode: 'history',
routes: [...]
})
通过 onhashchange 方法监听hash的改变来实现
hashchange
事件通过 onpopstate 方法监听history的改变来实现
history.pushState()
方法改变地址栏 IE 10 以后才支持popstate
事件history.replaceState()
http://www.testurl.com/login
这样的地址,会返回找不到该页面index.html
,比如:http://www.testurl.com/login.html
history需要服务器支持,我们使用node或nginx
http://localhost:8080/main/home
nginx处理方式
在nginx的html根目录部署一个项目,然后新开一个文件夹,部署另一个项目,nginx.conf
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html
}
try_files:
location /i/ {
alias /spool/w3/images/;
}
"/i/top.gif" -> "/spool/w3/images/top.gif"
# 把匹配到的路径重写, 注意要以/结尾
location /i/ {
root /spool/w3;
}
"/i/top.gif" -> "/spool/w3/i/top.gif"
# 在匹配到的路径前面,增加root基础路径配置
配置完nginx.conf之后,重启nginx
我的应用部署在一个子路径(/lily/)上,访问路径: https://www.xxxx/lily/
Uncaught SyntaxError: Unexpected token ‘<’
看起来像是跟root的配置有关,修改打包部署路径。
publicPath: IS_PROD ? '/lily/' : '/',
可以正常访问了
我是 甜点cc
苏格拉底:“我知道我不知道。”
公众号:【看见另一种可能】