Как создать многостраничное веб-приложение с Vuetify. js? - PullRequest
Новая
       11

Как создать многостраничное веб-приложение с Vuetify. js?

0 голосов
/ 03 августа 2020

Легко создать многостраничное приложение из Vue, которое можно построить, отредактировав файл vue.config.js. Но вчера днем, когда я пытался создать многостраничное веб-приложение с некоторыми структурами пользовательского интерфейса в Vuetify.js вместо чистого vue.js, произошла одна странная вещь:

Это двухстраничное приложение: домашняя страница и страница регистрации. Когда я запускаю npm run build, результирующая папка dist не содержит файла .html второй страницы.

Итак, я запускаю несколько тестов: вот что происходит:

  1. Если главная страница имеет имя файла index.html в vue.config.js, а вторая страница имеет имя файла second.html, тогда все в порядке.

  2. Если домашняя страница имеет имя файла index.html в vue.config.js, а вторая страница имеет имя файла /second/second.html или second/index.html. Тогда папка с именем second не будет создана, как и файл /second/second.html, который в ней находится.

У кого-нибудь были проблемы, похожие на это раньше, очень признательны за помогает.

Кроме того, я заметил, что когда он был просто чистым vue.js, активы, такие как изображения, будут помещены в отдельную папку в dist. Но после добавления vuetify.js в проект в dist могут появиться только папки js, css и fonts, эти ресурсы изображения будут храниться в папке dist. Я не уверен, является ли это особенностью новейшей версии vue.js, или это также вызвано конфигурацией vuetify.js. Спасибо за помощь.

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

Во время сборки приложения нет ошибок о невозможности создания папки. Все, что нужно для печати, - это предупреждение о размере актива, поскольку я не импортировал активы по частям, распечатки: 

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  home (1.54 MiB)
      css/chunk-vendors.c6dfe063.css
      js/chunk-vendors.216b9b9d.js
      css/home.429de16e.css
      js/home.635f35e5.js
  signup (1.53 MiB)
      css/chunk-vendors.c6dfe063.css
      js/chunk-vendors.216b9b9d.js
      css/signup.d6876e84.css
      js/signup.77b83ca7.js

Главная - это индексный файл, а вторая страница ссылается на страница регистрации. 

module.exports = {
  pages: {
    home: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'home'
    },
    signup: {
      entry: 'src/pages/signup/main.js',
      template: 'public/signup.html',
      filename: '/signup/index.html',
      title: 'signup page'
    }
  },
  transpileDependencies: [
    'vuetify'
  ]
}

Как видите, я поместил все шаблоны html в папку public. И у меня sh все созданные файлы html будут названы index. html в какой-то определенной папке, поэтому я не увижу html из URL-адреса моего небольшого проекта.

...