Рефакторинг многостраничных скаффолдингов на основе vue-cli

Vue.js

введение

Официальный инструмент генерации проектов vue-cli не поддерживает многостраничные веб-приложения, но в реальных проектах нам нужны такие скаффолдинги, ссылаясь на множество отличных методов, вот способ преобразования моего одностраничного скаффолдинга в схему многостраничного строительные леса для справки. Пожалуйста, поправьте меня, если я ошибаюсь.

Подготовить

Используйте vue-cli для создания необходимых вам одностраничных каркасов проекта, а затем мы начнем наш проект модификации.

процесс рефакторинга

Шаг 1 Измените структуру каталогов

  • step1 Создайте новую папку представлений в каталоге src, а затем создайте новую папку индекса в папке представлений.
  • step2 Переместите main.js и App.vue из каталога src в папку index на шаге 1 и переименуйте main.js в index.js.
  • шаг 3 Переместите папку маршрутизатора в каталоге src в папку index в шаге 1. Если вы не используете маршрутизатор, вы можете закомментировать его в index.js. Я не использую его, потому что каждая из моих страниц не является одностраничное приложение, в нем нет необходимости. Используйте функцию маршрутизации.
  • шаг 4 Переместите файл index.html из корневого каталога в папку index на шаге 1.

Шаг 2. Измените файл конфигурации при сборке.

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

  • step1 Измените utils.js, добавьте две функции, одна используется для получения мультивхода страницы, другая используется для ввода упакованной страницы и внедрить js:
var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(__dirname, '../src/views')
var merge = require('webpack-merge')

//多入口配置
//获取views文件夹下，每个页面下的index.js作为页面入口，故每个页面下都必须有index.js
exports.entries = function() {
  var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')
  var map = {}, tmp = [], pathname = '';
  entryFiles.forEach((filePath) => {
      var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
      tmp = filePath.split('/').splice(-4)
      map[tmp[2] + '/' + filename] = filePath
  })
  return map
}

//多页面输出配置
//读取views文件夹下的对应每个页面的html后缀文件，然后放入数组中
//如果想要更深的定制或者修改，建议大家看一下CommonsChunkPlugin
//推荐一个基础的 https://segmentfault.com/q/1010000009070061
exports.htmlPlugin = function() {
  let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
  let arr = []
  entryHtml.forEach((filePath) => {
      let jsPath = '', tmp = [];
      let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
      tmp = filePath.split('/').splice(-4)
      jsPath = tmp[2] + '/' + 'index'
      let conf = {
          template: filePath,
          filename: filename + '.html',
          chunks: ['manifest', 'vendors', jsPath],
          inject: true
      }
      if (process.env.NODE_ENV === 'production') {
          conf = merge(conf, {
              minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeAttributeQuotes: true
              },
              chunksSortMode: 'dependency'
          })
      }
      arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}
  • step2 Измените запись, настроенную в файле webpack.base.conf.js.
// entry: {
//     app: './src/main.js'
// },
entry: utils.entries(),
  • step3 Измените метод упаковки файла webpack.dev.conf.js Найдите следующий код и закомментируйте его:
new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),

Добавьте наш метод выше после значения атрибута plugins, и ниже приведен фрагмент кода:

	 // new HtmlWebpackPlugin({
    //   filename: 'index.html',
    //   template: 'index.html',
    //   inject: true
    // }),
    new FriendlyErrorsPlugin()
  ].concat(utils.htmlPlugin())
  • шаг 4 Изменить webpack.prod.conf.js Найдите следующий код и закомментируйте его:
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),

Добавьте наш метод выше после значения атрибута plugins, и ниже приведен фрагмент кода:

	 new CopyWebpackPlugin([{
            from: path.resolve(__dirname, '../static'),
            to: config.build.assetsSubDirectory,
            ignore: ['.*']
        }])
    ].concat(utils.htmlPlugin())

Конфигурация завершена. Просто запустите проект в обычном режиме.

постскриптум

В начале я тоже подобрал некоторые решения в интернете для использования, но ведь каждый рефакторит проект под свои нужды.Если это решение не соответствует вашим требованиям, то предлагаю все-таки настроить его под свои потребности Модификации. Я просто хочу поделиться с вами своим планом. Я опубликую код на github для дальнейшего использования. Если у вас есть какие-либо вопросы, вы можете отправить электронное письмо для обсуждения, я отвечу вовремя. Почта: Shuai.XUE@supinfo.com

Demo

Ниже приведен адрес проекта на github для справки:vue-multipage

В эту подмость добавлено больше сервисов на основе оригинала:

  • Имитационный сервис, может управлять на уровне модуля
  • Используйте axios для инкапсуляции базового получения ajax, и можно вызвать метод post.
  • Добавлены модули vuex и split.
  • Оптимизированная структура каталогов и унифицированная конфигурация информации интерфейса

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

Категории