提问：vue项目部署到nginx的非根目录location时如何解决刷新 404
来源：11-5 单页应用 Nginx 配置注意事项
wambaoxiaoyiyi
2020-01-17
因为想配置非根目录location，按老师的步骤好像不行。下面是我自己的步骤。
错误步骤：
1、在vue.config.js中的module.exports里添加一行
publicPath: process.env.NODE_ENV === ‘production’ ? ‘/haha/’ : ‘/’
2、将router的base配置成’/haha/'
const router = new VueRouter({
mode: ‘history’,
base: ‘/haha/’,
routes
})
3、nginx配置文件中的server块中添加location。其中/usr/local/myVueApplication/dist/是vue打包放上服务器的目录。
location /haha/ {
alias /usr/local/myVueApplication/dist/;
try_files $uri $uri/ /haha/index.html;
index index.html;
}
结果：上述配置页面刷新不会404，但是刷新后还原滚动条位置的功能失效。
求：怎么配置能让页面刷新不会404而且还原滚动条功能不会失效。
1回答
-
你好：
咱们i项目页面的滑动定位需要配合 keepAlive 进行使用。本质上就是监听 keepAlive 组件的 activated 回调事件，在回调事件中，通过之前保存的滑动距离，重新为 滑动的元素设置 scrollTop 的值。
当你的页面主动刷新了之后，所有在页面保存下来的值都会被重置，所以就不会还原滚动位置了。
不过咱们的项目主要还是在 移动端的 APP 中使用，在 APP中是不会存在主动刷新页面的浏览器操作的。如果你要在浏览器中保存滚动距离，那么可以尝试使用浏览器的存储方式来存储滚动数据，比如 sessionStorage 。
012020-01-17
相似问题