proxy vue 第二个配置404_nginx配置 vue打包后的项目 解决刷新页面404问题|nginx配置多端访问...

访问vue页面时，/# 使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 } //让页面滚动到顶部

}

})

复制代码

打包之后会造成一个问题，刷新打包文件页面 ，会出现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; //移动端root

if ($mobile_rewrite = do_not_perform) { //根据重定向 重置 root

root /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端项目啦。

有些地方可能表述的不够清晰，又不懂的地方可以留言，我看到知道后一定会及时回答的。