項目場景：
將vue項目打包部署到nginx上面運行
問題描述
問題一：運行時頁面白屏。
問題二：頁面可以正常顯示，當(dāng)刷新頁面的時候頁面報404錯誤。
原因分析：
頁面白屏分析：我們可以先查看一下nginx下的 logs/error.log 日志文件，確定我的問題是因為項目打包時候路勁配置問題。
頁面404分析：我們在將 vue項目打包部署時，地址欄的地址只是 vue的路由，并不是真正的文件目錄地址。所有的路由都是依賴于 SPA單頁應(yīng)用的index.html，所以當(dāng)我們在刷新時，按照地址欄的地址，找不到對應(yīng)的文件，就產(chǎn)生404。
解決方案：
頁面白屏解決：
配置vue項目根目錄下的vue.config.js文件，代碼如下：
const { defineConfig } = require('@vue/cli-service')
// 打包配置
module.exports = {
transpileDependencies: true, // 配置需要被 Babel 轉(zhuǎn)譯的依賴項。
publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : './',
outputDir: "dist", //輸出文件目錄
assetsDir: "static", //靜態(tài)資源文件名稱
productionSourceMap: false, //去除打包后js的map文件
lintOnSave: false,
runtimeCompiler: false,//去掉console
// 解決跨域
devServer: {
host:"127.0.0.1:xxxx",// 以上的ip和端口是我們本機的;下面為需要跨域的
proxy: { //配置跨域
'/api': {
target: " ", //這里后臺的地址模擬的;應(yīng)該填寫你們真實的后臺接口
ws: true,
secure: false, // 如果是https接口,需要配置這個參數(shù)
changOrigin: true, //允許跨域
pathRewrite: {
'^/api': '' //請求的時候使用這個api就可以
}
}
},
historyApiFallback: true,
}
}頁面404解決：
配置nginx中conf目錄下的nginx.conf文件，代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-616333.html
location /dist {
alias html/dist;
index index.html index.htm;
try_files $uri $uri/ /dist/index.html;
}
location @router {
rewrite ^.*$ /dist/index.html;
}解釋：當(dāng)我們訪問一個地址為 http://localhost:8056/dist/AssetChanges的時候先通過alias 確定路徑 html/dist，然后通過try_files配置，首先會在html/dist下去找 $uri，也就是login這個文件，這個時候因為沒有l(wèi)ogin文件，就會去找 $uri/ ，也就是 /login/ 這個文件目錄，如果還是沒找到，就會將其重定向到 @router，在定義的 @router 里，我們將其都指向 /dist 文件夾下的 index.html。這樣就成功解決問題文章來源地址http://www.zghlxwxcb.cn/news/detail-616333.html
到了這里，關(guān)于nginx 部署vue項目，頁面白屏或者頁面刷新出現(xiàn)404問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
