Quasar CLI：设置配置文件 quasar.conf.js

Question

我是 Laravel 和 Quasar 的新手，我一直在尝试整合。

我已经准备好后端部分，只是为了进行一些简单的测试。

我的前端也准备好了。

我遇到的唯一问题是 quasar 的配置文件。

我试着按照这个项目的方式设置： https://github.com/yyx990803/laravel-vue-cli-3

但是，api 没有获取数据。

这是我的配置代码。

quasar.conf.js

module.exports = function(/* ctx */) {
  return {
    supportTS: false,

    boot: ["i18n", "axios"],

    css: ["app.sass"],

    extras: ["roboto-font", "material-icons"],

    build: {
      vueRouterMode: "history",

      extendWebpack(cfg) {
        cfg.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /node_modules/
        });
      }
    },

    devServer: {
      https: false,
      port: 8080,
      open: true,
      proxy: {
        
        "/api": {
          target: "http:
          changeOrigin: true,
          pathRewrite: {
            "^/api": ""
          }
        }
      } 
    },

    framework: {
      iconSet: "material-icons",
      lang: "en-us",
      config: {},

      importStrategy: "auto",

      plugins: []
    },

    animations: [],

    ssr: {
      pwa: false
    },

    pwa: {
      workboxPluginMode: "GenerateSW",
      workboxOptions: {},
      manifest: {
        name: `Quasar App`,
        short_name: `Quasar App`,
        description: `A Quasar Framework app`,
        display: "standalone",
        orientation: "portrait",
        background_color: "#ffffff",
        theme_color: "#027be3",
        icons: [
          {
            src: "icons/icon-128x128.png",
            sizes: "128x128",
            type: "image/png"
          },
          {
            src: "icons/icon-192x192.png",
            sizes: "192x192",
            type: "image/png"
          },
          {
            src: "icons/icon-256x256.png",
            sizes: "256x256",
            type: "image/png"
          },
          {
            src: "icons/icon-384x384.png",
            sizes: "384x384",
            type: "image/png"
          },
          {
            src: "icons/icon-512x512.png",
            sizes: "512x512",
            type: "image/png"
          }
        ]
      }
    },

    cordova: {},

    capacitor: {
      hideSplashscreen: true
    },

    electron: {
      bundler: "packager",

      packager: {},

      builder: {
        appId: "frontend"
      },

      nodeIntegration: true,

      extendWebpack(/* cfg */) {}
    }
  };
};

Answer 1

这是关于如何设置 Quasar + Laravel 以在 mydomain.com/api

上使用 API 端点获得工作 PWA 的指南

https://dreamonkey.com/en/blog/how-to-setup-a-pwa-with-quasar-and-laravel/

检查它是否对您的用例有用。它希望您在本地机器上使用 Homestead 并使用 Laravel Sanctum.

管理身份验证

特别是这个片段：

module.exports = configure(function(ctx) {
  return {
    // Other configure options
    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
    devServer: {
      https: false,
      port: 8080,
      open: true, // opens browser window automatically
      proxy: [
        {
          context: ['/sanctum', '/login', '/password', '/logout', '/api'],
          target: 'http://192.168.10.10', // Laravel Homestead end-point
          // avoid problems with session and XSRF cookies
          // When using capacitor, use the IP of the dev server streaming the app
          // For SPA and PWA use localhost, given that the app is streamed on that host
          // xxx address is the IP address chosen by Quasar to stream the app
          cookieDomainRewrite:
            ctx.modeName === 'capacitor' ? 'xxx.xxx.xxx.xxx' : 'localhost'
        }
      ]
    },
  }
});

如果它不起作用，您可能在发出异步请求的代码中有一些错误

Quasar CLI：设置配置文件 quasar.conf.js

Quasar CLI: Setting the configuration file quasar.conf.js

javascript

laravel

vue.js

quasar

quasar-framework