Bagaimana untuk menjalankan projek uniapp di sebelah h5

Dengan perkembangan pesat Internet mudah alih, semakin banyak syarikat mula memberi perhatian dan menggunakan teknologi pembangunan silang. Uniapp, sebagai rangka kerja pembangunan merentas platform yang menyepadukan Vue.js dan keupayaan pembangunan program mini, telah digunakan secara meluas dalam banyak perusahaan.

Uniapp menyokong berjalan pada platform yang berbeza, seperti applet WeChat, applet Alipay, applet Baidu, hujung H5, hujung Apl, dll. Artikel ini terutamanya akan memperkenalkan cara menjalankan Uniapp pada hujung H5.

1. Permulaan projek

Sebelum menjalankan projek Uniapp, kita perlu memulakan projek terlebih dahulu. Masukkan arahan berikut dalam baris arahan:

npm install -g @vue/cli

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

di mana "projek saya" ialah nama projek, yang boleh ditukar mengikut keperluan. Selepas pemulaan selesai, kami boleh mengimport projek ke dalam alat pembangunan untuk menyunting dan menyahpepijat.

2. Tulis kod halaman

Dalam Uniapp, kami boleh membangunkan halaman dengan menulis komponen fail tunggal Vue. Berikut ialah contoh mudah:

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

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

Dalam halaman, kita boleh menggunakan pelbagai komponen untuk mencapai kesan interaktif yang berwarna-warni.

3. Konfigurasikan persekitaran berjalan H5

Selepas melengkapkan penulisan halaman, kita perlu mengkonfigurasi persekitaran berjalan H5 untuk menjalankan projek.

1. Ubah suai manifest.json

Dalam direktori akar projek, cari fail manifest.json, yang mentakrifkan beberapa sifat asas projek Uniapp. Kita perlu menetapkan nilai atribut berikut kepada benar untuk menyokong operasi bahagian H5.

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

2. Pasang kebergantungan

Jalankan arahan berikut untuk memasang pakej kebergantungan yang diperlukan untuk H5:

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

3. Konfigurasikan pek web

Dalam direktori akar projek, cipta fail vue.config.js dan tambah kod berikut:

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()
    );
  }
};

4. Jalankan projek

Selepas melengkapkan langkah di atas, Kita boleh memasukkan arahan berikut pada baris arahan untuk memulakan persekitaran berjalan H5:

npm run dev:h5

Pada masa yang sama, kita juga boleh menjalankan arahan berikut untuk pakej:

npm run build:h5

Semasa proses berjalan dan pembungkusan, Uniapp juga menyediakan pelbagai alat pembangunan dan penyahpepijatan untuk membantu pembangun membangun dan menyelenggara projek dengan lebih cepat.

Ringkasan

Artikel ini memperkenalkan secara ringkas cara menjalankan projek Uniapp pada bahagian H5 Dengan mengkonfigurasi dan menggunakan alatan yang sesuai, ia boleh membantu pembangun menjalankan pembangunan silang dengan lebih cekap. Dalam projek sebenar, kami juga boleh membuat beberapa pelarasan dan pengembangan yang fleksibel berdasarkan keperluan kami sendiri untuk memenuhi keperluan senario yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk menjalankan projek uniapp di sebelah h5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!