WdBly Blog

懂事、有趣、保持理智

WdBly Blog

懂事、有趣、保持理智

周维 | Jim

603927378@qq.com

Vue-Router项目设置Nginx伪静态

使用Vue + Vue-Router的项目,在history模式下,出现了刷新页面404的问题, 服务器为Nginx

出现刷新404的原因是Vue-Router定义的路由并没有真实的存在于服务器上, Nginx试图接管路由并按照路由地址寻找资源失败。

如: www.wddsss.com/src/a.png路由

当直接访问上链接时, Nginx会从server_name 为www.wddsss.com的路由配置的网站根目录下寻找资源, 也就是dist目录下去寻找 src/a.png;

// nginx的配置 server { server_name www.wddsss.com; root /www/project/blog/dist; index index.php index.html; }

如果dist目录下没有a.png的资源,服务器就会返回一个404的错误。

同理,我们在Vue-Router中定义的都是前端路由,服务器上没有真实的地址,所以解决404的方案是,如果nginx找不到资源,就返回项目的入口文index.html, 将路由让给前端来处理。

为了实现上述功能, 我们需要配置Nginx伪静态

一般来说,Nginx 配置如上,这就会出现Nginx去访问前端路由而出现了404的问题, 解决方案是配置Nginx的伪静态。

配置Nginx伪静态(try_files方式)

vim /etc/nginx/conf.d/xxx.conf;
server { // 域名 server_name www.wddsss.com; // 项目入口文件目录地址 保证有权限 root /www/project/blog/dist; index index.php index.html; // 配置伪静态 location / { try_files $uri $uri/ /index.html; } }

重启配置

nginx -s reload

注意项目目录的用户必须是nginx, 且有读写权限。

现在的Nginx配置已经不会再返回404页面了, 因为我们默认返回了index.html文件, 那么如果用户访问的不是服务器的资源, 同时也不是前端路由,那么我们理当返回一个404的页面给用户展示, 这部分工作现在已经落在了前端上完成, Vue-Router中配置如下

const router = new VueRouter({ mode: 'history', routes: [ ... { path: '*', component: NotFoundComponent } ] })