服务器配置vue项目的默认路由,Vue-Router项目设置Nginx伪静态

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 }

]

})