苦海学说

Personal Blog
Exchange Learning

关于vue单页面应用去除网站URL中的/#/

通常我们习惯以文件目录形式一样的URL,而不是域名后面多一个/#/的hash模式。

微信截图_20201021143511.png

下面我们来做以下两个配置解决:

1、Nginx配置

首先我们在nginx的配置nginx.conf文件加上这一句 try_files $uri $uri/ /index.html;

location / {
    try_files $uri $uri/ /index.html;
}

添加完成后,重启Nginx.

2、vue-router配置

然后在前端项目中的router文件加上mode: "history"

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
});

完成,构建部署发布后也不会出现所谓的刷新页面报404,下面是部署上去的效果图

微信截图_20201021143649.png

本原创文章未经允许不得转载 | 当前页面:苦海学说 » 关于vue单页面应用去除网站URL中的/#/

评论