记录vue刷新找不到页面

nginx代理了index.html,但是login页面不能刷新,需要配置nginx,直接上代码

listen       80;
        server_name  ip.ip.ip.ip;
        location / {
                add_header Cache-Control no-store;
                add_header Pragma no-cache;
                add_header Expires 0;
                root /home/wangyf/dist/;
                try_files $uri $uri/ @router;
                autoindex on;
                #index index.html index.htm;
                #proxy_pass http://localhost:9998/;             
        }
        location @router {
                rewrite ^.*$ /index.html last;
        }
 

### Vue 页面刷新后内容不显示的解决方案 #### 1. 检查路由模式 Vue Router 支持两种主要的历史记录管理方式:`hash` 和 `history`。默认情况下,Vue Router 使用的是 `hash` 模式,在这种模式下 URL 中会有一个井号 (`#`) 来区分路径部分。然而,当使用 `history` 模式时,URL 看起来更干净,但需要服务器端的支持以处理刷新请求。 对于 `history` 模式的应用,如果服务器未正确配置,则可能导致页面刷新时返回 404 错误[^4]。因此,建议先确认当前使用的路由模式: ```javascript const router = createRouter({ history: createWebHistory(), // 或者 createWebHashHistory() 对于 hash 模式 routes, }); ``` #### 2. 配置 Webpack Dev Server 在开发环境中,确保 webpack dev server 的公共路径设置正确,并且启用了历史 API 坠落回退功能。这可以通过修改 `vue.config.js` 文件实现: ```javascript module.exports = { publicPath: '/', devServer: { historyApiFallback: true, // 启用此选项可以防止刷新时出现 404 错误 }, }; ``` #### 3. 修改 Nginx/Apache 配置 (针对生产环境) 如果是已经部署的应用遇到刷新即丢失状态的情况,可能是因为服务端没有适当地重定向所有未知路径到入口 HTML 文件。以下是 Nginx 的一个简单例子: ```nginx server { location / { try_files $uri $uri/ /index.html; } } ``` 而对于 Apache 用户来说,可以在 `.htaccess` 文件中加入以下规则: ```apacheconf <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> ``` #### 4. 组件缓存机制调整 有时即使解决了上述问题,仍然可能出现特定场景下的空白页现象。这是因为 Vue 默认会对相同的组件实例进行复用,从而避免不必要的渲染开销。但如果业务逻辑依赖于每次进入都重新加载数据的话,就需要采取措施打破这种行为。 一种常见的做法是在目标视图组件内部监听 `$route` 变化事件,并据此执行必要的初始化工作: ```javascript watch: { '$route': 'fetchData' }, methods: { fetchData () { // 执行获取最新数据的操作... } } ``` 另一种更为彻底的方法是利用 `<keep-alive>` 标签配合自定义属性来控制哪些组件应该被保留或销毁: ```html <!-- 只有匹配 name 属性为 "pageA" 的组件会被缓存 --> <keep-alive :include="['pageA']"> <router-view></router-view> </keep-alive> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值