ホームページ > ウェブフロントエンド > フロントエンドQ&A > vueの起動パスを変更しても反映されない問題の解決方法

vueの起動パスを変更しても反映されない問題の解決方法

PHPz
リリース: 2023-04-13 10:45:51
オリジナル
1265 人が閲覧しました

最近、Vue フレームワークを開発に使用しているときに、Vue プロジェクトの起動パスの変更が有効にならず、カスタマイズされたパスではなくデフォルトでアクセスされる localhost:8080 のままであるという問題が発生しました。調査と実験を行った結果、この問題の解決策を見つけ、同じ問題に遭遇したより多くの開発者を助けることを願ってこの記事を書きました。

まず、Vue プロジェクトのデフォルトの起動パスを見てみましょう。 Vue プロジェクトでは、vue-cli スキャフォールディングによって生成された基本テンプレートを使用します。生成されたプロジェクト構造は次のとおりです。 ## フォルダー ##index.html

は Vue プロジェクトのエントリー ファイルであり、

<%= BASE_URL %> 変数を使用してプロジェクトのルート パスを表すことができます。 Vue のデフォルト モードは、/ パス (localhost:8080/) に基づいて起動します。 vue.config.js ファイル内のこのデフォルトのパスを変更しようとしましたが、反映されませんでした。 Vue 公式ドキュメントの紹介によると、次のコードを vue.config.js ファイルに追加する必要があります:

projectName
│   package-lock.json
│   package.json
│   README.md
│
├───public
│       favicon.ico
│       index.html
│
└───src
        App.vue
        main.js
ログイン後にコピー
このようにして、起動パスプロジェクトの

localhost:8080/newpath/ に変更できます。ただし、実験の結果、この方法はプロジェクトでは有効になりませんでした。これは、プロジェクトがアクセスに http ではなく

http://myproject.example.com

などの第 2 レベルのドメイン名を使用しているためです。 ://example.com/myproject パスのアクセス方法。 したがって、public フォルダーの下の index.html

にプロジェクトのルート パスを手動で追加する必要があります。

index.html ファイルで タグを見つけて、次のコードを追加します:

module.exports = {
    publicPath: '/newpath/'
}
ログイン後にコピー
The /newpath/これがカスタマイズされた起動パスです。このようにして、vue.config.js ファイルの

publicPath をどのように変更しても、プロジェクトに正しくアクセスできます。同時に、パスを / に変更して、第 2 レベルのドメイン名を介してプロジェクトにアクセスできるようにすることもできます。 つまり、Vue プロジェクトの起動パスをどのように変更しても、vue.config.js ファイル内で設定を行うのではなく、手動で設定する必要があります。実際のプロジェクトでは、正しい起動パスを構成することが非常に重要な手順になります。

以上がvueの起動パスを変更しても反映されない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート