vue打包刷新報(bào)錯(cuò)如何解決

本篇內(nèi)容主要講解“vue打包刷新報(bào)錯(cuò)如何解決”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue打包刷新報(bào)錯(cuò)如何解決”吧!

創(chuàng)新互聯(lián)專注于龍華網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供龍華營(yíng)銷型網(wǎng)站建設(shè)，龍華網(wǎng)站制作、龍華網(wǎng)頁(yè)設(shè)計(jì)、龍華網(wǎng)站官網(wǎng)定制、微信小程序定制開(kāi)發(fā)服務(wù)，打造龍華網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供龍華網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

vue打包刷新報(bào)錯(cuò)的解決辦法：1、將vue router的“mode”改成“hash”；2、修改Nginx為“l(fā)ocation / {root ...index ...try_files $uri $uri/ /index.html;}”；3、修改Apache為“RewriteRule . /index.html [L]”并保存即可。

vue項(xiàng)目部署后刷新報(bào)404 解決方法

一、原因

因之前vue搭建的項(xiàng)目的vue router  mode 使用的默認(rèn)模式hash,項(xiàng)目打包部署后刷新頁(yè)面不會(huì)出現(xiàn)404這種情況

但是因項(xiàng)目需求把vue router 的mode改成了history,結(jié)果跳轉(zhuǎn)頁(yè)面沒(méi)問(wèn)題，刷新頁(yè)面的時(shí)候報(bào)404錯(cuò)誤

二、解決方案：

方案一：vue router 的mode改成hash

方案二：nginx修改

location / {
  root ...
  index ...
  try_files $uri $uri/ /index.html; ---解決頁(yè)面刷新404問(wèn)題
}　

如圖：

警告：

因?yàn)檫@么做以后，你的服務(wù)器就不再返回 404 錯(cuò)誤頁(yè)面，因?yàn)閷?duì)于所有路徑都會(huì)返回 index.html 文件。為了避免這種情況，你應(yīng)該在 Vue 應(yīng)用里面覆蓋所有的路由情況，然后在給出一個(gè) 404 頁(yè)面?；蛘撸绻闶怯?Node.js 作后臺(tái)，可以使用服務(wù)端的路由來(lái)匹配 URL，當(dāng)沒(méi)有匹配到路由的時(shí)候返回 404，從而實(shí)現(xiàn) fallback。

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

方案三：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>

到此，相信大家對(duì)“vue打包刷新報(bào)錯(cuò)如何解決”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文名稱：vue打包刷新報(bào)錯(cuò)如何解決
標(biāo)題路徑：http://muchs.cn/article16/jehegg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、虛擬主機(jī)、網(wǎng)站策劃、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)