Comment exécuter le projet Uniapp du côté h5

Avec le développement rapide de l'Internet mobile, de plus en plus d'entreprises commencent à prêter attention et à utiliser la technologie de développement multi-terminal. Uniapp, en tant que cadre de développement multiplateforme intégrant Vue.js et des capacités de développement de mini-programmes, a été largement utilisé dans de nombreuses entreprises.

Uniapp prend en charge l'exécution sur différentes plates-formes, telles que l'applet WeChat, l'applet Alipay, l'applet Baidu, l'extrémité H5, l'extrémité App, etc. Cet article présentera principalement comment exécuter Uniapp à l'extrémité H5.

1. Initialisation du projet

Avant de lancer le projet Uniapp, nous devons d'abord initialiser le projet. Entrez la commande suivante dans la ligne de commande :

npm install -g @vue/cli

vue create -p dcloudio/uni-preset-vue my-project

où "mon-projet" est le nom du projet, qui peut être modifié si nécessaire. Une fois l'initialisation terminée, nous pouvons importer le projet dans l'outil de développement pour l'édition et le débogage.

2. Écrire le code de la page

Dans Uniapp, nous pouvons développer la page en écrivant le composant de fichier unique de Vue. Voici un exemple simple :

<template>
  <view class="container">Hello world!</view>
</template>

<style>
  .container {
    text-align: center;
    font-size: 24px;
    color: #333;
  }
</style>

Dans la page, nous pouvons utiliser divers composants pour obtenir des effets interactifs colorés.

3. Configurer l'environnement d'exécution H5

Après avoir terminé la rédaction de la page, nous devons configurer l'environnement d'exécution H5 pour exécuter le projet.

1. Modify manifest.json

Dans le répertoire racine du projet, recherchez le fichier manifest.json, qui définit certains aspects de base du Propriété du projet Uniapp. Nous devons définir les valeurs d'attribut suivantes sur true pour prendre en charge le fonctionnement du côté H5.

"h5": {
  "baseApiUrl": "",
  "devServer": {
    "host": "",
    "port": "",
    "compress": true
  },
  "subpackages": true,
  "postcss": true,
  "customVars": true
}

2. Installer les dépendances

Exécutez la commande suivante pour installer les packages de dépendances requis pour H5 :

npm install uni-html-webpack-plugin html-webpack-plugin webpack-dev-server webpack-cli webpack -D

# 🎜 🎜#Configure webpack

Dans le répertoire racine du projet, créez le fichier vue.config.js et ajoutez le code suivant :

const path = require('path');
const fs = require('fs');

const UniHtmlWebpackPlugin = require('uni-html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  configureWebpack: (config) => {
    const pages = {};
    const entries = {};
    const templateDir = './public';
    const templateExt = '.html';

    const appDirectory = fs.realpathSync(process.cwd());
    const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

    const getEntries = (dir, ext) => {
      const entryFiles = fs.readdirSync(dir);
      let regx = new RegExp(ext + '$');
      return entryFiles.filter(file => regx.test(file)).reduce((entry, file) => {
        const filename = file.replace(new RegExp(ext + '$'), '');
        entry[filename] = path.join(dir, filename);
        return entry;
      }, {});
    };

    const getPages = (entryDir, templateDir, templateExt) => {
      const entryFiles = fs.readdirSync(entryDir);
      let regx = new RegExp('\.(' + Object.keys(entries).join("|") + ')$');
      return entryFiles.filter(file => regx.test(file)).reduce((pages, file) => {
        const filename = file.replace(regx, '');
        const template = path.join(templateDir, filename + templateExt);
        pages[filename] = {
          entry: entries[filename],
          template,
          filename: `${filename}.html`,
          chunks: ['chunk-vendors', 'chunk-common', filename]
        };
        return pages;
      }, {});
    };
    Object.assign(entries, getEntries('./src/pages', '.vue$'));
    Object.assign(pages, getPages('./src/pages', templateDir, templateExt));

    config.entry = entries;
    config.plugins = config.plugins.concat(
      Object.keys(pages).map((name) => {
        const page = pages[name];
        return new HtmlWebpackPlugin({
          title: name,
          template: page.template,
          filename: page.filename,
          chunks: page.chunks,
          inject: true,
          minify: {
            removeComments: false,
            collapseWhitespace: false,
            removeAttributeQuotes: false,
            minifyJS: false,
            minifyCSS: false,
            minifyURLs: false
          }
        });
      }),
      new UniHtmlWebpackPlugin()
    );
  }
};

#🎜 🎜#Exécuter le projet

4. Après avoir terminé les étapes ci-dessus, nous pouvons saisir la commande suivante dans la ligne de commande pour démarrer l'environnement d'exploitation côté H5 :

npm run dev:h5

En même temps, nous pouvons également exécuter Utilisez la commande suivante pour empaqueter :

npm run build:h5

Pendant le processus d'exécution et d'empaquetage, Uniapp fournit également une multitude d'outils de développement et de débogage pour aider les développeurs à développer et à maintenir davantage de projets. rapidement.

Résumé

Cet article présente brièvement comment exécuter le projet Uniapp du côté H5 En configurant et en utilisant des outils appropriés, il peut aider les développeurs à mener un développement cross-end plus efficacement. . Dans les projets réels, nous pouvons également effectuer des ajustements et des extensions flexibles en fonction de nos propres besoins pour répondre aux exigences de différents scénarios.

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!