vue でアクセス ページのパスをパッケージ化して変更する方法

PHPz
リリース: 2023-04-12 11:45:57
オリジナル
3406 人が閲覧しました

Vue がパッケージ化された後、デフォルトのアクセス パスは /index.html になります。アクセス パスを変更する必要がある場合は、次の手順に従ってください。

  1. config/index.js ファイルを開く

Vue プロジェクトが作成されたら、config ディレクトリにindex.js ファイルが表示され、そのファイルを開くことができます。

  1. build.assetsPublicPath を変更します

ファイル内で build.assetsPublicPath を見つけます。この属性は静的リソースのパブリック パスを表します。つまり、静的リソースは次の場所で参照されます。生成されたindex.htmlファイルのパス。

デフォルト値は「/」です。これは、静的リソースのパスが、index.html ファイルが配置されているルート ディレクトリからの相対パスであることを意味します。

アクセス パスを「/myApp/」に変更する必要がある場合は、build.assetsPublicPath の値を「/myApp/」に設定する必要があります。

assetsPublicPath: '/myApp/'
ログイン後にコピー
  1. build.assetsSubDirectory の変更

同じファイル内で、build.assetsSubDirectory を見つけます。この属性は、静的リソースの保存ディレクトリを表します。

デフォルト値は「static」です。これは、静的リソースがプロジェクトのルート ディレクトリの下の静的ディレクトリに保存されることを意味します。

静的リソースをプロジェクト ルート ディレクトリの myApp/static ディレクトリに保存する必要がある場合は、build.assetsSubDirectory の値を「myApp/static」に設定する必要があります。

assetsSubDirectory: 'myApp/static'
ログイン後にコピー
  1. ルーター モードを変更する

ページ ルーティングにルーター モードを使用する場合は、ルーター モードも変更する必要があります。

router/index.js ファイルで、Router インスタンスを作成するコードを見つけます。

const router = new Router({
  mode: 'history',
  routes: [...]
})
ログイン後にコピー

モードを「ハッシュ」に変更します。これは、ページ ルーティングにハッシュ モードを使用することを意味します。

const router = new Router({
  mode: 'hash',
  routes: [...]
})
ログイン後にコピー
  1. パッケージングコマンドの実行

上記の設定を変更した後、パッケージングコマンドを再実行してパッケージ化する必要があります。

パッケージ化コマンドを実行します:

npm run build
ログイン後にコピー

パッケージ化が完了するのを待った後、生成されたファイルをサーバーにデプロイでき、アクセス パスは設定されたパスになります。

以上がvue でアクセス ページのパスをパッケージ化して変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!