vue3 がパゴダをデプロイした後のリクエスト インターフェイス 404 とリフレッシュ ページ 404 の問題の解決策

テクノロジー: vue3.2.13
UI フレームワーク: element-plus 2.1.1
サーバー: Tencent Cloud Centos システム + パゴダ パネル
Nginx: 1.22.1

前提: Pagoda パネル == 「Web サイトの PHP プロジェクトが新しいプロジェクトを作成しました」

1. vue ページ更新エラー 404 を処理する

上に示すように、PHP Web サイト == "Settings == " 構成ファイルに次のコードを追加して、エラー ページ 404 の更新の問題を解決します。

    location / {
    
    
      try_files $uri $uri/ /index.html;
    }

2. vue ページ要求インターフェイスによって報告されるエラー 404 の問題を処理する

上に示すように、PHP Web サイト == "Settings == " 構成ファイルに次のコードを追加して、エラー ページ 404 の更新の問題を解決します。

// 这里做完记录贴实例，只写一个，实际上项目proxy里几个代理，则写几个
location ^~/blogApi/ {
    
    
    proxy_pass http://localhost:5009/;
}

私のvue.config.jsの構成は次のとおりです

// 这里做完记录贴实例，只写一个，实际上项目proxy里几个代理，则写几个
 "/blogApi": {
    
    
        target: process.env.VUE_APP_API_BASE_URL,
        changeOrigin: true, // 是否跨域
        secure: false, // 如果是https接口，需要配置这个参数
        pathRewrite: {
    
    
          "^/blogApi": "",
        },
      },

3. 上記の処理が完了したら保存し、ログイン ページのリクエスト インターフェイスを更新します。

页面刷新正常、接口请求code200 则说明配置成功！