Учите вас построить многостраничное приложение VUE2 на основе WebPack4

внешний фреймворк
Учите вас построить многостраничное приложение VUE2 на основе WebPack4

задний план

Такой бизнес-сценарий существует как в бывшей, так и в нынешней компании: много страниц H5, которые неактуальны, если используется SPA, то он не очень дружелюбен ко многим лендингам и страницам активности, а также к некоторым чистым front-end страницам. загружаются слишком медленно, поэтому он родился Создайте основу для многостраничного MPA.

Сначала я думал об использовании vue-cli3 для создания, потому что сам vue-cli3 имеет возможность многостраничной конфигурации.Вы можете выполнить многостраничную настройку, напрямую изменив параметр страниц.Небольшие партнеры, которым это нужно, могут обратиться по ссылке:страницы vue-cli3. Однако, поскольку он совместим с системами ниже Android 4.4 (Некоторые библиотеки запросов содержат синтаксис E6, например: axios, который не распознается системами ниже Android 4.4, поэтому открытая страница будет пустой.), страницы не могут быть настроены вход массивов, нет возможности добавить babel-polyfill, не совместим с младшей версией исходной системы, поэтому, наконец, принят webpack4 для многостраничного пакета.

стек технологий

Технологические стеки, задействованные в этом проекте, в основном следующие: webpack4, vue2, vuex3, vue-router, eslint. В основном это конфигурация webpack 4. Фактически, vue, vuex и vue-router используются одинаково.

Сначала прикрепите адрес репозитория git, а затем уточните:webpack-vue-multipage.

Проблема, которую решает фреймворк

  • webpack упаковывает разные страницы

Фактически, принцип основан на файле страницы входа WebPack, спа-салон, упакованный в несколько проектов.

  • Совместимость с телефонами ниже Android 4.4

  • Маршрутизатор страниц и поддержка упаковки на уровне папок

Эти два метода предназначены для поддержки нескольких страниц в рамках одного и того же проекта. Например, простая версия торгового центра, который мы сделали, также находится в этом многостраничном. В настоящее время торговый центр может использовать маршрутизатор для управления маршрутизацией страниц или использовать Иерархический метод для создания нескольких html-страниц для достижения этой цели. Вы можете использовать различные решения в соответствии с вашим собственным бизнесом. Мы представим два метода.

  • Различные страницы могут быть упакованы в соответствии с различными html

Некоторые js необходимо импортировать непосредственно в шаблон html, а также упаковывать и генерировать непосредственно в html, но для некоторых страниц не нужно импортировать другие js, например, для некоторых чисто статических страниц.

  • git commit проверяется по eslint при отправке

Чтобы обеспечить единство команды, представляющую код, вы можете обратиться к моей статье до самородков,Рука об руку с вами, чтобы попрактиковаться в стандартных спецификациях фронтенд-разработки

Вступление почти готово, не много ерунды, просто начнем все это дело:

как использовать

git clone https://github.com/Shiyanping/webpack-vue-multipage.git

cd webpack-vue-multipage

npm install

npm run dev
# 启动之后在浏览器访问即可，http://localhost:8022/index.html

# eslint
npm run eslint

# 格式化代码
npm run prettier

# build
npm run build

Конфигурация веб-пакета

Разница между многостраничным и одностраничным в основном заключается в записи, поэтому мы сначала обрабатываем запись.

entry

Самая большая разница между многостраничным и одностраничным заключается в том, что вход отличается.

  • Многостраничный: наконец, несколько записей (html-страницы) генерируются с помощью упаковки.Как правило, в дополнение к общедоступным статическим файлам (js/css) каждый файл записи должен также содержать статические ресурсы для конкретной страницы.

  • Одна страница: существует только одна запись ( index.html ), все статические файлы после пакета необходимо импортировать на страницу, а все содержимое страницы контролируется JavaScript.

Просто взгляните на код: в utils есть get_entry_config.js для получения конфигурации записи, которая включает необязательный справочный шаблон html для записи, а в конфигурацию записи добавляется babel-polyfill. Комментарии на самом деле написаны и понятны.Если у вас есть вопросы, вы можете задать их мне, как моему брату.

const fs = require("fs");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const config = require("./../../config/page_config"); // 多页面的配置项

const resolve = dir => {
  return path.resolve(process.cwd(), dir);
};

let HTMLPlugins = [];
let Entries = {};

config.HTMLDirs.forEach(item => {
  let filename = `${item.page}.html`;

  /**
   * 支持多级目录，dir/page.html
   * 多页面框架中可以采用这种方式增加层级目录，一个目录下有多个页面
   * 也可以使用 router 进行同级目录下一个html，通过 router 控制路由
   */
  if (item.dir) {
    filename = `${item.dir}/${item.page}.html`;
  }

  // 每个页面的文件夹下可以含有一个自己的index.html，如果有会根据这个模板进行build
  let pageHtml = `src/pages/${item.page}/index.html`;

  // 如果文件夹下没有制定的模板，则采用默认的模板 build
  if (!fs.existsSync(pageHtml)) {
    pageHtml = "src/template/default.html";
  }

  const htmlPlugin = new HTMLWebpackPlugin({
    title: item.title, // 生成的html页面的标题
    filename: filename, // 生成到dist目录下的 html 文件名称
    template: resolve(pageHtml), // 模板文件，不同入口可以根据需要设置不同模板
    chunks: [item.page, "vendor"] // html文件中需要要引入的 js模块，这里的 vendor 是 webpack 默认配置下抽离的公共模块的名称
  });

  HTMLPlugins.push(htmlPlugin);

  // 添加 babel-polyfill 解决安卓 4.4 以下兼容问题
  Entries[item.page] = [
    "babel-polyfill",
    resolve(`src/pages/${item.page}/index.js`)
  ];
});

module.exports = {
  HTMLPlugins,
  Entries
};

Вышеупомянутый js относится к page_config.js, в этом js в основном многостраничная информация о конфигурации:

module.exports = {
  HTMLDirs: [
    {
      page: "index",
      title: "首页"
    },
    {
      page: "list",
      title: "列表页",
      dir: "content" // 支持设置多级目录
    },
    {
      page: "detail",
      title: "详情页"
    }
  ]
};

Наконец, введите соответствующую конфигурацию в webpack.config.js:

module.exports = {
  entry: entryConfig.Entries,
  plugins: [
    ...entryConfig.HTMLPlugins // 利用 HTMLWebpackPlugin 插件合成最终页面
  ]
};

Это основные настройки нашей многостранички, которая является входом в многостраничку.

На разных страницах используются разные HTML-шаблоны.

На самом деле, чтобы поставить его прямо, многостраничное состоит в том, чтобы объединить несколько небольших проектов в один крупный проект. Это то, что WebPack делает для нас, но корреляция между этими небольшими проектами не велика, поэтому она сделана на многостранственную.

В реальной разработке некоторые страницы необходимо импортировать js-файлы непосредственно в html, например общедоступный jsbridge компании, который не упакован как пакет npm, а может быть импортирован только следующим образом:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>
      <%= htmlWebpackPlugin.options.title %>
    </title>
  </head>
  <body>
    <div id="app"></div>
    <script src="http://www.xxx.com/jsbridge.min.js"></script>
  </body>
</html>

Тем не менее, некоторые общие страницы не нуждаются в этом js.Если мы все используем один и тот же шаблон html для упаковки, это эквивалентно пакетированию нескольких страниц, каждая страница имеет этот js, что приведет к более медленным запросам страниц.

В настоящее время необходимо использовать разные html-шаблоны для разных небольших проектов.

На самом деле основной код — это следующие предложения, очень простые:

  // 每个页面的文件夹下可以含有一个自己的index.html，如果有会根据这个模板进行build
  let pageHtml = `src/pages/${item.page}/index.html`;

  // 如果文件夹下没有制定的模板，则采用默认的模板 build
  if(!fs.existsSync(pageHtml)){
    pageHtml = 'src/template/default.html';
  }

  const htmlPlugin = new HTMLWebpackPlugin({
    ...
    template: resolve(pageHtml), // 模板文件，不同入口可以根据需要设置不同模板
    ...
  });

Обратитесь к шаблону html в соответствии с каталогом папки.Если папка текущей страницы имеет свой index.html, то мы будем использовать свой, если нет, мы будем использовать его по умолчанию. Таким образом, когда html упакован и сгенерирован, на разные html-шаблоны можно ссылаться в соответствии с разными страницами, и не будет проблем со ссылками на нежелательные js.

Проблемы совместимости ниже Android 4.4

Проблема, о которой многие люди не говорят, Xiangnong, на самом деле, я не хочу, но никоим образом, а, группы пользователей компании составляют большую часть Android-машины, а на Android 4.4 следующие модели приходится 20% таких случаев надо на странице сделать совместимым.

На самом деле сделать одну страницу совместимой очень просто: настройте babel-polyfill в записи webpack, а затем напрямую введите babel-polyfill и es6-promise в main.js отдельной страницы. следующим образом:

// webpack.config.js
entry = ['babel-polyfill', resolve('src/main.js')];

// main.js
import 'babel-polyfill';
import promise from 'es6-promise';
promise.polyfill();

Таким образом, SPA может решить проблему совместимости, а у MPA есть небольшая проблема.Чтобы сделать выводы из одного случая, нам нужно добавить babel-polyfill в каждую запись entry, а затем ввести babel-polyfill и es6-promise в index .js под каждой страницей.

Как можно написать статью без картинки, без кода, в этот раз сделаю скриншот:

get_entry_config.js:

Неудобно смотреть, забудьте, давайте перейдем к коду~

// 添加 babel-polyfill 解决安卓 4.4 以下兼容问题
Entries[item.page] = ['babel-polyfill', resolve(`src/pages/${item.page}/index.js`)]; // 根据配置设置入口js文件

Затем добавьте скомпилированный код в index.js в каждой папке.

// src/pages/**/index.js
import Vue from 'vue';
// import '@styles/lib/main.scss';
import Tpl from './index.vue';
import store from '../../store';
import 'babel-polyfill';
import promise from 'es6-promise';
promise.polyfill();

new Vue({
  store,
  render: (h) => h(Tpl)
}).$mount('#app');

После того, как это скомпилировано, вы можете решить совместимость Android 4.4, а Pro Test эффективно.

Маршрутизатор страниц и поддержка упаковки на уровне папок

Каждый небольшой проект может включать несколько проектов с относительно большим количеством страниц, таких как простая версия торгового центра, включающая страницу списка продуктов, страницу сведений о продукте и страницу заказа.

На этом этапе мы можем использовать два метода:

  • Управление маршрутизацией с помощью vue-router

Он должен быть создан в определенной папке, иначе несколько страниц используют маршрутизатор, и будут неожиданные результаты.. На самом деле, мы можем думать о MPA как о нескольких SPA, одном SPA и одном маршруте, между ними нет никакой связи, и нет необходимости создавать чистую страницу без маршрутизации.

Таким образом, вы можете использовать маршрутизацию для управления направлением разных страниц.

Структура выглядит следующим образом:

├── components
│   ├── About
│   │   └── Index.vue
│   └── Home
│       └── Index.vue
├── index.js
├── index.vue
└── router.js

Использование ничем не отличается от разработки других SPA.

  • Используйте иерархическую упаковку

Это еще один способ управлять направлением страницы путем упаковки ее в иерархический каталог.В этом нет никакой маршрутизации, просто упаковка и добавление уровня.

Есть два основных момента, которые нужно контролировать, один из них — конфигурация страницы.page_config.js, другой — запись обработки веб-пакетаget_entry_config.js, см. код:

page_config.js:

{
  page: 'list',
  title: '列表页',
  dir: 'content' // 支持设置多级目录
}

get_entry_config.js:

let filename = `${item.page}.html`;

/**
 * 支持多级目录，dir/page.html
 * 多页面框架中可以采用这种方式增加层级目录，一个目录下有多个页面
 * 也可以使用 router 进行同级目录下一个html，通过 router 控制路由
*/
if (item.dir) {
  filename = `${item.dir}/${item.page}.html`;
}

Таким образом, упакованные файлы могут достигать следующих иерархических отношений:

├── list.html
└── list1.html

При доступе вы можете напрямую обращаться к странице, не полагаясь на маршрутизацию.

git commit hook для проверки eslint

Это я не буду уточнить, в основном выполненным, чтобы держать всех в команде, прежде чем отправлять код неудачной проверки, чтобы убедиться, что код репозитория Git не проблема, и формат одинаково, это также можно использовать с более красивым использованием, бесплатно Baidu.

Если у вас проблемы с конфигурацией, вы можете обратиться к моей предыдущей статье,Рука об руку с вами, чтобы попрактиковаться в стандартных спецификациях фронтенд-разработки.

Следует отметить, что в начале вы клонировали мой репозиторий.Если вы хотите проверить eslint для коммита, вам нужно удалить .git в папке, связать его с вашим репозиторием git, а затем переустановить пакет husky.

Суммировать

Базовые функции реализованы, но не идеально, есть много не добавленных функций, таких как адаптация стиля мобильного терминала, инкапсуляция библиотеки сетевых запросов, извлечение публичных методов... Итак есть еще много недостатков Добро пожаловать в мойрепозиторий githubПр и вопрос на сайте, отвечу вовремя.

Ссылка на ссылку:

После прочтения трилогии

Большое спасибо, что нашли время, чтобы прочитать его, и искренне надеемся, что вы можете потратить небольшое количество времени, чтобы помочь сделать две вещи:

  • Пошевелите пальцами и поставьте мне большой палец вверх. Ваш большой палец вверх — самая большая мотивация для меня.

  • Если вам интересно, вы можете добавить меня в WeChat, я приглашаю вас присоединиться к группе обсуждения интерфейса, там есть сюрпризы~

  • Надеюсь, вы обратите внимание на мою официальную учетную запись. Новые статьи будут размещены на официальной учетной записи как можно скорее. Официальная учетная запись в основном отправляет некоторые личные эссе, заметки для чтения, а также некоторые технические горячие точки и горячие точки в реальном времени, и есть и очень привлекательные за свой счет.Розыгрыши!

Категории