uniapp ändert das Verpackungsverzeichnis

UniApp ist ein plattformübergreifendes Front-End-Framework auf Basis von Vue.js, mit dem eine Reihe von Codes problemlos auf mehreren Terminals ausgeführt werden können. Wenn UniApp für die Entwicklung verwendet wird, muss das Projekt letztendlich in Codes gepackt werden, die von verschiedenen Terminals wie H5, Miniprogrammen, Apps usw. benötigt werden. In diesem Artikel wird erläutert, wie Sie das Paketverzeichnis von UniApp ändern.

Das Standardpaketverzeichnis von UniApp ist „dist“, wodurch die von verschiedenen Terminals benötigten Codes generiert werden. Beispielsweise wird H5-Code im Ordner „h5“ im Verzeichnis „dist“ generiert. Wenn Sie das Paketverzeichnis von UniApp ändern müssen, können Sie die folgenden Schritte ausführen.

1. Öffnen Sie das Uni-App-Projekt

Nach dem Öffnen des Uni-App-Projekts müssen wir die beiden „webpack.dev.conf.js“ und „webpack.prod.conf.js“ unter „build“ finden. Ordnerdokument. Diese beiden Dateien sind Konfigurationsdateien, die beim Packen von UniApp benötigt werden.

2. Webpack.dev.conf.js ändern

Suchen Sie die Datei „webpack.dev.conf.js“ und suchen Sie nach dem folgenden Code:

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

Unter diesen stellt „config.build.assetsRoot“ das Stammverzeichnis dar Der gepackte Code wird im Verzeichnis gespeichert. Der Standardwert ist das Verzeichnis „dist“. Wir können es in den gewünschten Verzeichnisnamen ändern und beispielsweise den gepackten Code im Verzeichnis „build“ speichern:

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

An diesem Punkt haben wir die Änderung von „webpack.dev.conf.js“ abgeschlossen.

3. Webpack.prod.conf.js ändern

Suchen Sie die Datei „webpack.prod.conf.js“ und suchen Sie nach dem folgenden Code:

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

Ähnlich können wir „config.build.assetsRoot“ in ändern our Der gewünschte Verzeichnisname.

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 ändern

Nach Abschluss der beiden oben genannten Schritte müssen wir auch den Verpackungspfad in der Datei „vue.config.js“ ändern, um ihn mit der geänderten Datei „webpack.dev“ konsistent zu machen. Die Konfigurationsdateien „conf.js“ und „webpack.prod.conf.js“ sind konsistent.

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

In „outputDir“ ändern wir es in den gewünschten Verzeichnisnamen, z. B. „build“.

5. Verpacken des Projekts

Nachdem wir die obigen Schritte ausgeführt haben, können wir das gesamte UniApp-Projekt neu packen und der von uns gepackte Code wird in dem von uns festgelegten Verzeichnis gespeichert.

Zusammenfassung

Durch die oben genannten Schritte können wir das Paketverzeichnis von UniApp problemlos ändern. Es ist zu beachten, dass beim Ändern des Verpackungsverzeichnisses sichergestellt werden muss, dass das Verzeichnis nicht vorhanden ist, da sonst die Verpackung fehlschlagen kann. Wenn im Projekt Ressourcenreferenzen und andere Vorgänge vorhanden sind, müssen gleichzeitig entsprechende Änderungen basierend auf dem geänderten Verpackungspfad vorgenommen werden.

Das obige ist der detaillierte Inhalt vonuniapp ändert das Verpackungsverzeichnis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!