快捷導(dǎo)航

vue項目打包解決靜態(tài)資源無法加載和路由加載無效(404)問題

更新時間：2023年10月12日 08:55:35 作者：NGIWS

這篇文章主要介紹了vue項目打包，解決靜態(tài)資源無法加載和路由加載無效(404)問題,靜態(tài)資源無法使用，那就說明項目打包后，圖片和其他靜態(tài)資源文件相對路徑不對,本文給大家介紹的非常詳細(xì)，需要的朋友跟隨小編一起看看吧

打包后的項目靜態(tài)資源無法使用，導(dǎo)致頁面空白

靜態(tài)資源無法使用，那就說明項目打包后，圖片和其他靜態(tài)資源文件相對路徑不對，此時找到config里面的index.js，在build模塊下加入assetsPublicPath: './',如下圖所示，

在History模式下配合使用nginx運(yùn)行打包后的項目

當(dāng)刷新當(dāng)前路由的時候，就會出現(xiàn)404的狀況，其實(shí)這是因?yàn)楫?dāng)刷新當(dāng)前頁面時候，所需要訪問的資源在服務(wù)器上找不到，也就是說，我們在Vue開發(fā)應(yīng)用的過程中，設(shè)置路由的路徑不是真實(shí)存在的路徑，并且使用了history模式。

這是由于我們的應(yīng)用是一個單頁的客戶端應(yīng)用，如果沒有適當(dāng)?shù)姆?wù)器配置，用戶在瀏覽器中直接訪問https://example.com/user/id（假設(shè)此url在開發(fā)中是可以訪問的），也會得到一個 404 錯誤。

解決方法：在部署項目的服務(wù)器上找到nginx的配置文件nginx.conf添加以下內(nèi)容

server {
        listen       80; #監(jiān)聽80端口
        server_name  audio;  #設(shè)置server_name名為audio，切記不能與配置文件中的其他server_name重名
        location / {
	   try_files $uri $uri/ /index.html; #使用history模式進(jìn)行路由
            root 	C:\phpstudy_pro\WWW; #將打包好的dist文件夾中的內(nèi)容放進(jìn)WWW文件夾中
            autoindex on;       #開啟nginx目錄瀏覽功能
            autoindex_exact_size off;   #文件大小從KB開始顯示
            charset utf-8;          #顯示中文
            add_header 'Access-Control-Allow-Origin' '*'; #允許來自所有的訪問地址
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持請求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
			add_header 'Access-Control-Allow-Headers' 'x_hztz_token,*';
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

注意：配置完nginx后使用命令進(jìn)行重載