問題背景
在vue項(xiàng)目部署后憾儒，當(dāng)在瀏覽器上進(jìn)行刷新時(shí)，會(huì)出現(xiàn)404 Not Found錯(cuò)誤，這是因?yàn)椴渴鸷蟮撵o態(tài)文件資源沒有被正確地映射到服務(wù)器的URL路徑上唆貌。
解決方法
部署vue項(xiàng)目后，需要在服務(wù)器端配置URL路徑的映射規(guī)則垢乙，將瀏覽器請(qǐng)求的URL路徑指向?qū)?yīng)的靜態(tài)文件資源锨咙。
方案1：使用nginx配置
如果你使用的是nginx服務(wù)器，可以通過在nginx.conf文件中添加如下配置來解決該問題：
location / {
? try_files $uri $uri/ /index.html;
}
這段配置規(guī)定了URL路徑的請(qǐng)求如果無法找到對(duì)應(yīng)的靜態(tài)文件追逮，就會(huì)重定向到根目錄下的index.html文件酪刀，從而解決404問題。
方案2：使用Apache配置
如果你使用的是Apache服務(wù)器钮孵，可以通過在.htaccess文件中添加如下配置來解決該問題：
<IfModule mod_rewrite.c>
? RewriteEngine On
? RewriteBase /
? RewriteRule ^index\.html$ - [L]
? RewriteCond %{REQUEST_FILENAME} !-f
? RewriteCond %{REQUEST_FILENAME} !-d
? RewriteRule . /index.html [L]
</IfModule>
這個(gè).htaccess配置文件規(guī)定了URL路徑的請(qǐng)求如果無法找到對(duì)應(yīng)的靜態(tài)文件骂倘，就會(huì)重定向到根目錄下的index.html文件，從而解決404問題巴席。
示例說明
假設(shè)你的vue項(xiàng)目是在/home/vagrant/my-project目錄下历涝，你使用的是nginx服務(wù)器。
示例1：在nginx.conf文件中添加配置
在服務(wù)器上運(yùn)行如下命令打開nginx.conf文件：
sudo nano /etc/nginx/nginx.conf
在http塊中情妖，加入如下配置：
server {
? listen? ? ? 80;
? server_name? localhost;
? location / {
? ? root /home/vagrant/my-project/dist; # 指定根目錄
? ? try_files $uri $uri/ /index.html; # 追加這行配置
? }
}
重啟nginx服務(wù)：
sudo systemctl restart nginx
示例2：在.htaccess文件中添加配置
在my-project/dist目錄下新建一個(gè).htaccess文件睬关，并加入如下配置：
<IfModule mod_rewrite.c>
? RewriteEngine On
? RewriteBase /
? RewriteRule ^index\.html$ - [L]
? RewriteCond %{REQUEST_FILENAME} !-f
? RewriteCond %{REQUEST_FILENAME} !-d
? RewriteRule . /index.html [L]
</IfModule>
保存文件，并上傳到服務(wù)器上的my-project/dist目錄下毡证。
總結(jié)
以上是關(guān)于vue項(xiàng)目部署后刷新網(wǎng)頁(yè)報(bào)404錯(cuò)誤解決的完整攻略电爹，可以通過nginx配置或者.htaccess配置來解決該問題。
