打包后的項(xiàng)目靜態(tài)資源無法使用，導(dǎo)致頁面空白
靜態(tài)資源無法使用，那就說明項(xiàng)目打包后，圖片和其他靜態(tài)資源文件相對(duì)路徑不對(duì)，此時(shí)找到config里面的index.js，在build模塊下加入assetsPublicPath: './',?如下圖所示，或者是在打包完的dist文件夾中找里面的.js文件，將其中的'/'替換為'./'（自行尋找）
? ? ? ?
在History模式下配合使用nginx運(yùn)行打包后的項(xiàng)目
當(dāng)刷新當(dāng)前路由的時(shí)候，就會(huì)出現(xiàn)404的狀況，其實(shí)這是因?yàn)楫?dāng)刷新當(dāng)前頁面時(shí)候，所需要訪問的資源在服務(wù)器上找不到，也就是說，我們?cè)赩ue開發(fā)應(yīng)用的過程中，設(shè)置路由的路徑不是真實(shí)存在的路徑，并且使用了history模式。
這是由于我們的應(yīng)用是一個(gè)單頁的客戶端應(yīng)用，如果沒有適當(dāng)?shù)姆?wù)器配置，用戶在瀏覽器中直接訪問?https://example.com/user/id（假設(shè)此url在開發(fā)中是可以訪問的），也會(huì)得到一個(gè) 404 錯(cuò)誤。
解決方法：在部署項(xiàng)目的服務(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'; #支持請(qǐng)求方式
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)行重載
nginx -s reload文章來源：http://www.zghlxwxcb.cn/news/detail-710611.html
或手動(dòng)重啟nginx服務(wù)文章來源地址http://www.zghlxwxcb.cn/news/detail-710611.html
到了這里，關(guān)于vue項(xiàng)目打包，解決靜態(tài)資源無法加載和路由加載無效(404)問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
