訪問(wèn)vue頁(yè)面時(shí)，/# 使url看著不美觀，使用 H5 history模式可以完美解決這個(gè)問(wèn)題，但需要后端nginx幫助。接下來(lái)我們自己配置一下。

使用前端路由，但切換新路由時(shí)，想要滾動(dòng)到頁(yè)面頂部，或者保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣，vue-router 可以讓你自定義路由切換頁(yè)面時(shí)如何滾動(dòng)。

當(dāng)創(chuàng)建Router實(shí)例時(shí)，可以提供一個(gè) scrollBehavior 方法：

const router = new VueRouter({routes: [...],mode: 'history', //H5 history模式scrollBehavior (to, from, savedPosition) {// return 期望滾動(dòng)到哪個(gè)的位置return { x: 0, y: 0 } //讓頁(yè)面滾動(dòng)到頂部} }) 復(fù)制代碼

更多滾動(dòng)行為實(shí)例可以參考官網(wǎng) router.vuejs.org/zh/guide/ad…

打包之后會(huì)造成一個(gè)問(wèn)題，刷新打包文件頁(yè)面 ，會(huì)出現(xiàn)404頁(yè)面空白，接下來(lái)需要配置一下nginx文件，就可以訪問(wèn)打包后的文件了。

vue單頁(yè)面的啟動(dòng)頁(yè)面是index.html文件，路由實(shí)際是不存在的，所以會(huì)出現(xiàn)頁(yè)面刷新404問(wèn)題，需要設(shè)置一下訪問(wèn)vue頁(yè)面映射到index.html上。

首先，我們需要確定一下打包靜態(tài)資源的路徑需要設(shè)置絕對(duì)路徑

config/index.js

build: {assetsPublicPath: '/' } 復(fù)制代碼

然后配置一下nginx映射問(wèn)題

location / {root /www/dist;index index.html index.htm;try_files $uri $uri/ /index.html; //映射到index.html上 } 復(fù)制代碼

醬紫就可以訪問(wèn)啦。

有同學(xué)可能會(huì)遇到 nginx 配置pc端、移動(dòng)端自動(dòng)跳轉(zhuǎn)的問(wèn)題， 接下來(lái)我們配置一下。

http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;server {listen 80;server_name www.baidu.com; //服務(wù)器網(wǎng)址set $mobile_rewrite do_not_perform; //設(shè)置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;} //設(shè)置移動(dòng)端重定向location / {root /www/dist/m; //移動(dòng)端rootif ($mobile_rewrite = do_not_perform) { //根據(jù)重定向 重置 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;}} 復(fù)制代碼

醬紫就可以使用同一網(wǎng)址同時(shí)訪問(wèn)移動(dòng)端和pc端項(xiàng)目啦。

有些地方可能表述的不夠清晰，又不懂的地方可以留言，我看到知道后一定會(huì)及時(shí)回答的。

總結(jié)

以上是生活随笔為你收集整理的nginx配置 vue打包后的项目 解决刷新页面404问题|nginx配置多端访问的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。