项目npm run build 之后的dist放到ngigx中,修改下nginx的配置文件 ,在conf中的nginx.conf

将这部分代码修改为

 

 listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root  F:/Nginx/nginx-1.20.0/html/dist/;
            index  index.html;
            try_files $uri $uri/ /index.html;
        }

  try_files $uri $uri/ /index.html;——这一段就是用来防止刷新之后出现Cannot Get /XXX的

但是:

这么做以后,访问任何路径都不会出现 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。
 

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

Logo

前往低代码交流专区

更多推荐