使用类星体构建多个页面

Question

我需要使用 Quasar 构建一个多页面网站以托管在 Netlify 上，但 Quasar 仅构建 index.html。

我已经尝试使用 Quasar build 和 Quasar build --mode ssr。两者都失败了超过 index.html.

有没有实现多个页面的方法？

Answer 1

Quasar框架默认构建单页应用，即你的index.html页面是唯一的页面，而不是去不同的静态页面，它使用Vue路由器加载动态页面和组件到你心满意足:)

查看此 Quasar 文档，该文档解释了 SPA（单页应用程序）及其工作原理（以及为什么这是最好的做法）： https://quasar.dev/quasar-cli/developing-spa/introduction#Introduction

查看此 Quasar 文档以了解如何向您的应用添加更多路由（页面）： https://quasar.dev/layout/routing-with-layouts-and-pages#Defining-Routes

Quasar Framework 绝对是正确的选择，所以坚持下去。我很乐意为您介绍任何事情。我已经为近十几个客户使用了该框架，其中许多最近被投资者估值为数百万。 Quasar 是您能想到的任何平台的最佳组合，从简单的网站到将被数百万人使用的复杂的网络和移动应用程序；它出色地完成了工作。

我已经编写应用程序和网站 20 年了，没有什么比 Quasar 更容易使用的了。你会爱上它的！

Answer 2

SPA的概念很好，但是还是不能满足所有人的需求，比如有一个后端app（比如django）不愿意花很多时间去开发休息api 或 graphql 来提供 SPA 内容。

归根结底，Quasar cli 的核心只是一个 webpack 配置，您可以自定义它来实现您想要 webpack 可以做的任何事情，包括多页面应用程序，这是实现此目的的快速方法：

apps/myapp/pages.js

module.exports = {
  main_page: {
    entry: `${__dirname}/pages/main/main_page.js`
  }
  blog_entry_page: {
    entry: `${__dirname}/pages/blog/blog_entry_page.js`
  }
  ...
}

quasar.conf.js:

const HtmlWebpackPlugin = require('@quasar/app/node_modules/html-webpack-plugin')
const pages = require('./apps/myapp/pages')

module.exports = function (ctx) {
  return {
    ...
    build: {
      ...
      extendWebpack (cfg) {
        ...
        Object.keys(pages).forEach(function (page) {
          // Add page webpack entry
          cfg.entry[page] = pages[page].entry

          // Output an html file for the page
          cfg.plugins.push(
            new HtmlWebpackPlugin({
              template: 'mytemplate.html',
              filename: `html/${page}.html`,
              chunks: [page]
            })
          )
        })
        ...
      }
    }
  }

以上是一个简化的示例，仅用于演示概念，有关完整的功能示例，请参见：https://gitlab.com/noor-projects/noor/tree/master/quasar-cli （检查此 commit 以了解为启用 MPA 支持而添加的内容）

使用类星体构建多个页面

Build multiple pages using quasar

node.js

npm

quasar

quasar-framework