建设工程中标通知书查询网站,免费jianzhan,做视频网站适合用什么服务器,北京seo推广服务访问vue页面时#xff0c;/# 使url看着不美观#xff0c;使用 H5 history模式可以完美解决这个问题#xff0c;但需要后端nginx帮助。接下来我们自己配置一下。 使用前端路由#xff0c;但切换新路由时#xff0c;想要滚动到页面顶部#xff0c;或者保持原先的滚动位置/# 使url看着不美观使用 H5 history模式可以完美解决这个问题但需要后端nginx帮助。接下来我们自己配置一下。 使用前端路由但切换新路由时想要滚动到页面顶部或者保持原先的滚动位置就像重新加载页面那样vue-router 可以让你自定义路由切换页面时如何滚动。 当创建Router实例时可以提供一个 scrollBehavior 方法 const router new VueRouter({routes: [...],mode: history, //H5 history模式scrollBehavior (to, from, savedPosition) {// return 期望滚动到哪个的位置return { x: 0, y: 0 } //让页面滚动到顶部}
})
复制代码 更多滚动行为实例可以参考官网 router.vuejs.org/zh/guide/ad… 打包之后会造成一个问题刷新打包文件页面 会出现404页面空白接下来需要配置一下nginx文件就可以访问打包后的文件了。 vue单页面的启动页面是index.html文件路由实际是不存在的所以会出现页面刷新404问题需要设置一下访问vue页面映射到index.html上。 首先我们需要确定一下打包静态资源的路径需要设置绝对路径 config/index.js build: {assetsPublicPath: /
}
复制代码 然后配置一下nginx映射问题 location / {root /www/dist;index index.html index.htm;try_files $uri $uri/ /index.html; //映射到index.html上
}
复制代码 酱紫就可以访问啦。 有同学可能会遇到 nginx 配置pc端、移动端自动跳转的问题 接下来我们配置一下。 http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;server {listen 80;server_name www.baidu.com; //服务器网址set $mobile_rewrite do_not_perform; //设置pc重定向if ($http_user_agent ~* (android|bb\d|meego).mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.firefox|netfront|opera m(ob|in)i|palm( os )?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino) {set $mobile_rewrite perform;} //设置移动端重定向location / {root /www/dist/m; //移动端rootif ($mobile_rewrite do_not_perform) { //根据重定向 重置 rootroot /www/dist; //pc端root}index index.html index.htm;try_files $uri $uri/ /index.html; //映射到index.html上}location ~ ^/api {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;proxy_pass http://unix:/home/dev/official/official.sock;proxy_max_temp_file_size 2m;proxy_connect_timeout 90;proxy_send_timeout 90;proxy_read_timeout 90;proxy_buffer_size 4k;proxy_buffers 4 32k;proxy_busy_buffers_size 64k;proxy_temp_file_write_size 64k;client_max_body_size 5m;} error_page 404 http://www.baidu.com;error_page 500 502 503 504 /50x.html;location /50x.html {root html;}}
复制代码 酱紫就可以使用同一网址同时访问移动端和pc端项目啦。 有些地方可能表述的不够清晰又不懂的地方可以留言我看到知道后一定会及时回答的。
