How to run the uniapp project on the h5 side

With the rapid development of mobile Internet, more and more enterprises are beginning to pay attention to and use cross-end development technology. Uniapp, as a cross-platform development framework that integrates Vue.js and mini program development capabilities, has been widely used in many enterprises.

Uniapp supports running on different platforms, such as WeChat applet, Alipay applet, Baidu applet, H5 side, App side, etc. This article will mainly introduce how to run Uniapp on the H5 side.

1. Project initialization

Before running the Uniapp project, we need to initialize the project first. Enter the following command on the command line:

npm install -g @vue/cli

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

where "my-project" is the project name, which can be changed as needed. After the initialization is completed, we can import the project into the development tool for editing and debugging.

2. Write page code

In Uniapp, we can develop the page by writing Vue's single file component. The following is a simple example:

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

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

In the page, we can use various components to achieve colorful interactive effects.

3. Configure the H5 running environment

After completing the writing of the page, we need to configure the H5 running environment to run the project.

1. Modify manifest.json

In the root directory of the project, find the manifest.json file, which defines some basic properties of the Uniapp project. We need to set the following attribute values ​​to true to support the operation of the H5 side.

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

2. Installing dependencies

Run the following command to install the dependency packages required for H5:

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

3. Configure webpack

In the root directory of the project, create the vue.config.js file and add the following code:

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. Run the project

After completing the above steps, We can enter the following command on the command line to start the H5 running environment:

npm run dev:h5

At the same time, we can also run the following command to package:

npm run build:h5

During the running and packaging process, Uniapp also provides a wealth of development and debugging tools to help developers develop and maintain projects more quickly.

Summary

This article briefly introduces how to run the Uniapp project on the H5 side. By configuring and using appropriate tools, it can help developers conduct cross-end development more efficiently. In actual projects, we can also make some flexible adjustments and expansions based on our own needs to meet the requirements of different scenarios.

The above is the detailed content of How to run the uniapp project on the h5 side. For more information, please follow other related articles on the PHP Chinese website!