vue element打包部署后前端访问页面出现404

一时失言乱红尘 2022-10-25 14:22 296阅读 0赞

element项目打包部署至服务器后，前端访问页面出现404页面，无法进入其他页面。

在vue-router路由对象中，路由有两种模式：hash和history，而我一般使用history模式，在history模式下，前端路由须和向后端发起请求的路由一致，如果后端缺少对/news/id 的路由处理，将返回404错误，我将history改为hash就可以访问了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center]  
前端访问有的页面可以进去，地址栏默认的地址进不去显示404  
这个就是你路由有问题，就是你路由守卫里指向了一个默认页面，然后你路由里没有配置默认的空的应该去往那个路由，于是路由里走到了最下面的404。你需要在router 里配置一条默认的路由。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center 1]  
router 里的配置，默认的会去向‘/home/index’路径。

import Layout from "@/layout";
    export const constantRoutes = [
       { 
        path: '/',
        component: Layout,
         redirect: '/purchase/purchase'
       },
       ]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center 2]  
写着最后~ 有问题欢迎留言~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/74efb908d30546fe8d2a43ce7a1b3bc7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221024/7375d7a849c04f698ea7d93f64192ef6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221024/b7f45d19fa9349c39e94f4b6d095243a.png