uniapp modifie le répertoire de packaging

UniApp est un framework frontal multiplateforme basé sur Vue.js, qui peut facilement permettre à un ensemble de codes de s'exécuter sur plusieurs terminaux. Lors de l'utilisation d'UniApp pour le développement, le projet doit finalement être regroupé dans les codes requis par différents terminaux, tels que H5, mini-programmes, applications, etc. Cet article explique comment modifier le répertoire d'empaquetage d'UniApp.

Le répertoire d'empaquetage par défaut d'UniApp est "dist", qui générera le code requis par différents terminaux. Par exemple, le code H5 sera généré dans le dossier "h5" du répertoire "dist". Si vous devez modifier le répertoire d'empaquetage d'UniApp, vous pouvez suivre les étapes ci-dessous.

1. Ouvrez le projet uni-app

Après avoir ouvert le projet uni-app, nous devons trouver "webpack. "dev.conf. js" et "webpack.prod.conf.js" deux fichiers. Ces deux fichiers sont des fichiers de configuration nécessaires lors du packaging d'UniApp.

2. Modifier webpack.dev.conf.js

Recherchez le fichier "webpack.dev.conf.js" et recherchez le code suivant : # 🎜🎜#

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

Parmi eux, "config.build.assetsRoot" représente le répertoire racine où le code packagé est stocké, et la valeur par défaut est le répertoire "dist". Nous pouvons le modifier avec le nom du répertoire que nous voulons, par exemple, stocker le code packagé dans le répertoire "build":

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

À ce stade, nous avons terminé le "webpack.dev.conf. js " modification.

Modifier webpack.prod.conf.js

Recherchez le fichier "webpack.prod.conf.js" et recherchez le code suivant :# 🎜🎜#

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

De même, nous pouvons modifier "config.build.assetsRoot" par le nom du répertoire que nous voulons.

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

Modify vue.config.js

Après avoir terminé les deux étapes ci-dessus, nous devons également modifier vue.config.js Modifier le chemin d'empaquetage dans le fichier pour le rendre cohérent avec les fichiers de configuration modifiés "webpack.dev.conf.js" et "webpack.prod.conf.js".

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

Dans "outputDir", nous le modifions avec le nom du répertoire que nous voulons, tel que "build".

Projet de packaging

5. Après avoir terminé les étapes ci-dessus, nous pouvons reconditionner l'intégralité du projet UniApp et le code que nous avons empaqueté sera stocké dans le répertoire que nous avons défini.

Résumé

Grâce aux étapes ci-dessus, nous pouvons facilement modifier le répertoire d'emballage d'UniApp. Il convient de noter que lors de la modification du répertoire d'empaquetage, assurez-vous que le répertoire n'existe pas, sinon l'empaquetage pourrait échouer. Dans le même temps, s'il existe des références de ressources et d'autres opérations dans le projet, les modifications correspondantes doivent être apportées en fonction du chemin d'empaquetage modifié.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!