1,解决跨域问题,设置反向代理

然后编辑配置文件,将下图选中部分删掉

反向代理就设置ok啦,然后开心的打开项目,发现跳转过页面后,浏览器不能刷新,一刷新就出现404页面。

这个解决办法就是修改配置文件可以实现

Apache配置如下:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Nginx配置如下:

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

将上面的配置按照服务器的环境选取放到下图位置即可:

 这样虽然可以实现浏览器刷新不跳404了。

但是这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

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

如果上图配置完后出现了 Uncaught Error: Invalid path "*"  

就把 " * " 改成 " /:pathMatch(.*) " 

实列代码如下:

{ path: '/:pathMatch(.*)', name:'NotFoundComponent',component: NotFoundComponent }

Logo

前往低代码交流专区

更多推荐