uniapp はパッケージ化ディレクトリを変更します

UniApp は、Vue.js をベースにしたクロスプラットフォームのフロントエンド フレームワークで、一連のコードを複数の端末で簡単に実行できるようにします。 UniApp を開発に使用する場合、プロジェクトは最終的に、H5、ミニ プログラム、アプリなど、さまざまな端末に必要なコードにパッケージ化する必要があります。この記事では、UniAppのパッケージングディレクトリを変更する方法を紹介します。

UniApp のデフォルトのパッケージング ディレクトリは "dist" であり、さまざまな端末で必要なコードが生成されます。たとえば、H5 コードは "dist" ディレクトリの下の "h5" フォルダに生成されます。 UniApp のパッケージング ディレクトリを変更する必要がある場合は、以下の手順に従ってください。

1. uni-app プロジェクトを開きます

uni-app プロジェクトを開いた後、「build」の下に「webpack.dev.conf.js」を見つける必要があります。フォルダーと「webpack.prod.conf.js」の 2 つのファイル。これら 2 つのファイルは、UniApp をパッケージ化するときに必要な設定ファイルです。

2. webpack.dev.conf.js を変更します

「webpack.dev.conf.js」ファイルを見つけて、次のコードを探します:

output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

このうち「config.build.assetsRoot」はパッケージ化されたコードが格納されるルートディレクトリを表しており、デフォルトは「dist」ディレクトリです。これを必要なディレクトリ名に変更できます。たとえば、パッケージ化されたコードを「build」ディレクトリに保存します。

output: {
  path: config.build.assetsRoot.replace('dist', 'build'),
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

この時点で、「webpack.dev.conf.js」の変更が完了しました。 「修正。

3. webpack.prod.conf.js を変更する

「webpack.prod.conf.js」ファイルを見つけて、次のコードを探します:

output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

同様に、「config.build.assetsRoot」を必要なディレクトリ名に変更できます。

output: {
  path: config.build.assetsRoot.replace('dist', 'build'),
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

4. vue.config.js を変更する

上記の 2 つの手順を完了した後、「vue.config.js」ファイル内のパッケージ化パスも変更する必要があります。これにより、変更された「webpack.dev.conf.js」および「webpack.prod.conf.js」構成ファイルとの一貫性が確保されます。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  outputDir: 'build',
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
      }
    }
  },
};

「outputDir」を、「build」などの任意のディレクトリ名に変更します。

5. プロジェクトのパッケージ化

上記の手順を完了したら、UniApp プロジェクト全体を再パッケージ化できます。このとき、パッケージ化したコードは、設定したディレクトリに保存されます。 。 真ん中。

概要

上記の手順により、UniApp のパッケージング ディレクトリを簡単に変更できます。パッケージング ディレクトリを変更する場合は、そのディレクトリが存在しないことを確認してください。存在しないとパッケージ化が失敗する可能性があります。同時に、プロジェクト内にリソース参照やその他の操作がある場合は、変更されたパッケージ化パスに基づいて対応する変更を行う必要があります。

以上がuniapp はパッケージ化ディレクトリを変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。