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

编程问答 2022-08-11

问题描述

我是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",{
            src: "icons/icon-256x256.png",sizes: "256x256",{
            src: "icons/icon-384x384.png",sizes: "384x384",{
            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 */) {}
    }
  };
};

解决方法

以下是有关如何设置Quasar + Laravel以获得I am using a xml file as a resource file. 上具有API端点的有效PWA的指南

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

检查它是否对您的用例有用。 它希望您能够在本地计算机上使用Homestead并使用Laravel Sanctum管理身份验证。

此代码段尤其如此：

<ContentPage name="10">
<ParagraphList name="Paragraphs">
<entry Text="&lt;p&gt;&lt; font 
             color=&quot;#404040&quot;&gt;$lay.dummy.xs9.text&lt;/font&gt;&lt;/p&gt;&lt;p&gt;&lt;font 
             color=&quot;#808080&quot;&gt;- $lay.dummy.xs8.text -&lt;/font&gt;&lt;/p&gt;" 
       Image="#icontv"
       View="row" 
       Style="image.width=45&amp;image.height=45&amp;image.bgcolor=%231fc5b2&amp;text.font- 
             size=16&amp;all.css=border-right%3A+1px+solid+%23808080%3B&amp;text.css=line- 
             height%3A80%25&amp;image.css=border-radius%3A+50%25%3B+padding%3A+10.5px++11.25px%3B"/>

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

javascriptlaravellaravelquasarquasar-frameworkvue.js