vue プロジェクトをパッケージ化して生成された dist をサーバーにスローすると、リソースにアクセスできないことがわかりますか?

        vue プロジェクトを作成した後、ローカルでのテストは問題ありませんでしたが、今度はパブリック ネットワーク上で他の人にもアクセスしてもらいたいので、当然クラウド サーバーを使用する必要があります。私は現在 Tencent Cloud を使用しており、Pagoda パネルを追加していますが、これは非常に便利です。

        発生する問題は、私のプロジェクトはローカルでは問題がないのですが、サーバーに投げると、dist 内の css、js、img がすべて 404 見つからないことがわかります。ブラウザのデバッグ ツールで読み取った後、リクエストが行われたことがわかりました パスが正しくありません。パスが 1 つ欠落している、つまり /dist が欠落しているようです。もちろん、これは単なる私の推測です。

        解決策: 私も初心者で落とし穴を踏んでいるので、推測に従って練習して vue.config.js のパスを修正してみましょう ここのパスは webpack に関連するもの、つまり Dist をパッケージ化した後だと思います関連するので、次のコード行を追加しました: publicPath:'./'、次に npm run build を再度実行し、パッケージ化された dist をサーバーにスローしたため、問題は解決されました。

私の vue.config.js のコードのスクリーンショット:

 

 

おすすめ

転載: blog.csdn.net/qq_41083105/article/details/119389286