2023-02-26 579
记录一个新手很容易遇见的问题,vue的项目,在打包前本地cli模式运行没有任何问题,但是打包完在apache或者nginx中配置了域名后,项目会出现刷新后404的奇怪问题
vue-router的mode使用了history模式,默认应该是hash模式。
一般都会因为hash模式的url不够美观,都用的history模式,而问题是由于history模式引起的。
history模式下的url并不是真实存在的,所以刷新后会找不到。
当你打包了项目后,一般默认会生成一个dist文件夹,文件夹下有且只有一个index.html文件。
并且vue是单页应用,因此我们可以认为所有的url路径其实都应该指向index.html的,至于路径vue会用独有的路由解析方式把他解析到对应的js文件,然后js把文件中的html模块渲染到index,html中,实现页面的展示,所以不要被路径所迷惑,
你可以把url路径理解为vue匹配页面所需要的参数,但是这个url路径如果你直接访问或者刷新,不管是apache还是nginx都无法去匹配到这个url路径,因为它不存在,所以我们此时就要在apache或者nginx配置一下伪静态,让每个url路径都指向index.html就可以了。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
location / {
......
try_files $uri $uri/ /index.html;
}
原文链接:https://www.77isp.com/post/34673.html
=========================================
https://www.77isp.com/ 为 “云服务器技术网” 唯一官方服务平台,请勿相信其他任何渠道。
数据库技术 2022-03-28
网站技术 2022-11-26
网站技术 2023-01-07
网站技术 2022-11-17
Windows相关 2022-02-23
网站技术 2023-01-14
Windows相关 2022-02-16
Windows相关 2022-02-16
Linux相关 2022-02-27
数据库技术 2022-02-20
小游客游戏攻略网游戏攻略网 2024年07月26日
抠敌 2023年10月23日
嚼餐 2023年10月23日
男忌 2023年10月22日
瓮仆 2023年10月22日
扫码二维码
获取最新动态