nginx部署vue頁(yè)面白屏或刷新404問(wèn)題解決

更新時(shí)間：2023年10月25日 10:25:47 作者：YG·玉方

最近部署vue項(xiàng)目后發(fā)現(xiàn)刷新頁(yè)面會(huì)404,本文就來(lái)介紹一下nginx部署vue頁(yè)面白屏或刷新404問(wèn)題解決,具有一定的參考價(jià)值,感興趣的可以了解一下

項(xiàng)目場(chǎng)景：

將vue項(xiàng)目打包部署到nginx上面運(yùn)行

問(wèn)題描述

問(wèn)題一：運(yùn)行時(shí)頁(yè)面白屏。

問(wèn)題二：頁(yè)面可以正常顯示，當(dāng)刷新頁(yè)面的時(shí)候頁(yè)面報(bào)404錯(cuò)誤。

原因分析：

頁(yè)面白屏分析：我們可以先查看一下nginx下的 logs/error.log 日志文件，確定我的問(wèn)題是因?yàn)轫?xiàng)目打包時(shí)候路勁配置問(wèn)題。

頁(yè)面404分析：我們?cè)趯?vue項(xiàng)目打包部署時(shí)，地址欄的地址只是 vue的路由，并不是真正的文件目錄地址。所有的路由都是依賴于 SPA單頁(yè)應(yīng)用的index.html，所以當(dāng)我們?cè)谒⑿聲r(shí)，按照地址欄的地址，找不到對(duì)應(yīng)的文件，就產(chǎn)生404。

解決方案：

頁(yè)面白屏解決：

配置vue項(xiàng)目根目錄下的vue.config.js文件，代碼如下：

const { defineConfig } = require('@vue/cli-service')

// 打包配置
module.exports = {
  transpileDependencies: true, // 配置需要被 Babel 轉(zhuǎn)譯的依賴項(xiàng)。
  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和端口是我們本機(jī)的;下面為需要跨域的
    proxy: { //配置跨域 		
      '/api': {
        target: " ", //這里后臺(tái)的地址模擬的;應(yīng)該填寫(xiě)你們真實(shí)的后臺(tái)接口
        ws: true,
        secure: false, // 如果是https接口,需要配置這個(gè)參數(shù)
        changOrigin: true, //允許跨域
        pathRewrite: {
          '^/api': '' //請(qǐng)求的時(shí)候使用這個(gè)api就可以
        }
      }
    },
    historyApiFallback: true,
  }
}

頁(yè)面404解決：

配置nginx中conf目錄下的nginx.conf文件，代碼如下：

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)我們?cè)L問(wèn)一個(gè)地址為 http://localhost:8056/dist/AssetChanges的時(shí)候先通過(guò)alias 確定路徑 html/dist，然后通過(guò)try_files配置，首先會(huì)在html/dist下去找 $uri，也就是login這個(gè)文件，這個(gè)時(shí)候因?yàn)闆](méi)有l(wèi)ogin文件，就會(huì)去找 $uri/ ，也就是 /login/ 這個(gè)文件目錄，如果還是沒(méi)找到，就會(huì)將其重定向到 @router，在定義的 @router 里，我們將其都指向 /dist 文件夾下的 index.html。這樣就成功解決問(wèn)題

到此這篇關(guān)于nginx部署vue頁(yè)面白屏或刷新404問(wèn)題解決的文章就介紹到這了,更多相關(guān)nginx部署vue 404內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: