之前两周用vue全家桶写了公司的官网,由于不想公司官网有难看的#符号,所以路由采用了history模式,由于history模式就是真是的请求服务器资源,但是前端路由的路径在服务器端是不存在的,所以需要将所有不存在的路由请求重写,转发到index.html来处理
前端路由配置
const base = routes.reduce((pre, {name}) => {
const reg = RegExp(`/${name}.*`)
return pre.replace(reg, '')
}, location.pathname)
export default new Router({
mode:'history',
base:base,
routes: routes,
scrollBehavior(to,from,savedPosition){
if(savedPosition){
return savedPosition
}else{
return {x:0,y:0}
}
}
})
后端apache配置
由于我们需要对url进行重写,所以需要开启appache的rewrite模块
- 查找“#LoadModule rewrite_module modules/mod_rewrite.so” 去掉前面的#号
- 把AllowOverride None 改为 AllowOverride All
-
在你要部署的前端文件目录之下新建一个.htaccess文件
文件目录
在文件内写入以下代码
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L] #注意这里的路径,如果是在根路径直接写/index.html,如果不是根路径还需要加上路径名称
这样就大功告成了
网友评论