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

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

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

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

2. build.assetsPublicPath を変更します

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

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

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

assetsPublicPath: '/myApp/'

3. build.assetsSubDirectory の変更

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

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

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

assetsSubDirectory: 'myApp/static'

4. ルーター モードを変更する

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

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

const router = new Router({
  mode: 'history',
  routes: [...]
})

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

const router = new Router({
  mode: 'hash',
  routes: [...]
})

5. パッケージングコマンドの実行

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

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

npm run build

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

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