為何捐款
API 瀏覽器
升級指南
NEW!
quasar.config 檔案
將專案轉換為搭配 Vite 的 CLI
瀏覽器相容性
支援 TypeScript
目錄結構
命令列表
CSS 預處理器
路由
延遲載入 - 代碼分割
處理資源
啟動檔案
預取功能
API 代理
處理 Vite
處理 process.env
使用 Pinia 進行狀態管理
使用 Vuex 進行狀態管理
Linter
測試 & 稽核
開發行動應用程式
Ajax 請求
公開開發伺服器
Quasar CLI 搭配 Vite - @quasar/app-vite
Quasar CLI 搭配 Vite 的升級指南

@quasar/app-vite v2 (beta)

CLI 目前為 beta 版

  • 請協助測試 CLI,以便我們能讓它脫離 beta 狀態。我們在此提前感謝您的協助!
  • 雖然我們不打算新增任何進一步的重大變更,但根據您的意見回饋,仍然有很小的機率我們會被迫進行變更。

警告

所有其他文件頁面都將參考舊版的 @quasar/app-vite 版本 (v1) 規格。目前只有此頁面提及如何使用 v2 beta 版。

給 App Extensions 擁有者的注意事項

您可能會想要發佈新版本的 Quasar App Extensions,以支援新的 @quasar/app-vite。如果您沒有更動 quasar.config 設定,那麼只需變更以下內容即可

api.compatibleWith(
  '@quasar/app-vite',
- '^1.0.0'
+ '^1.0.0 || ^2.0.0-beta.1'
)

值得注意的重大變更

  • Node.js 最低版本現在為 18 (主要是因為 Vite 5)
  • 我們已將整個 Quasar 專案資料夾轉向 ESM 樣式,因此許多預設專案檔案現在需要 ESM 程式碼 (雖然支援使用 .cjs 作為這些檔案的副檔名,但如果您不希望進行任何變更,則很可能需要重新命名副檔名)。一個範例是 /quasar.config.js 檔案,現在也假設它是 ESM (因此,如果您仍然想要 CommonJs 檔案,請從 .js 變更為 .cjs )。
  • 由於 @quasar/testing-* 套件的最新更新,已移除 “test” cmd 命令。請參閱 此處
  • “clean” cmd 命令已重新設計。在您升級的 Quasar 專案資料夾中輸入 “quasar clean -h” 以取得更多資訊。
  • Typescript 偵測是根據 quasar.config 檔案是否為 TS 格式 (quasar.config.ts) 和 tsconfig.json 檔案是否存在而定。
  • feat+refactor(app-vite): 能夠同時執行多種模式 + 開發/建置 (巨大的努力!)
  • SSR 和 Electron 模式現在以 ESM 格式建置。
  • 已捨棄對我們內部 linting 系統 (quasar.config 檔案 > eslint) 的支援。應改用 vite-plugin-checker
  • 我們將在下方詳細說明每個 Quasar 模式的更多重大變更.

重點說明新功能

以下某些工作已回溯移植到舊版的 @quasar/app-vite v1,但在此發佈以提醒讀者注意。

  • feat(app-vite): 升級至 Vite 5
  • feat(app-vite): 能夠同時執行多個 quasar dev/build 命令 (範例:可以同時執行 “quasar dev -m capacitor” 和 “quasar dev -m ssr” 和 “quasar dev -m capacitor -T ios”)
  • feat(app-vite): 更好的 TS 類型定義
  • refactor(app-vite): 將 CLI 移植到 ESM 格式 (重大的努力!尤其是為了支援 Vite 5 和 SSR)
  • feat(app-vite): 支援多種格式的 quasar.config 檔案 (.js、.mjs、.ts、.cjs)
  • feat(app-vite): 改善 quasarConfOptions,為其產生類型,改善文件 (修正:#14069) (#15945)
  • feat(app-vite): 如果 quasar.config 檔案中的其中一個匯入項目變更,則重新載入應用程式
  • feat(app-vite): TS 偵測也應考量 quasar.config 檔案格式 (quasar.config.ts)
  • feat(app-vite): 簡寫 CLI 命令 “quasar dev/build -m ios/android” 現在以 Capacitor 模式為目標,而非 Cordova (2.0.0-beta.12+)
  • feat(app-vite): 支援使用 HTTPS 進行 SSR 開發
  • feat(app-vite): env 點檔案支援 #15303
  • feat(app-vite): 新的 quasar.config 檔案屬性:build > envFolder (字串) 和 envFiles (字串陣列)
  • feat(app-vite): 當透過 quasar.config 檔案變更應用程式網址時,重新開啟瀏覽器 (如果已如此設定)
  • feat&perf(app-vite): 更快且更準確的演算法,可判斷要使用的 node 套件管理器
  • feat(app-vite): 升級 deps
  • feat(app-vite): 移除 cli 範本中 Electron 6-8 中錯誤的權宜之計 (#15845)
  • feat(app-vite): 移除 Capacitor v5+ 的 bundleWebRuntime 設定
  • feat(app-vite): 預設使用 workbox v7
  • feat(app-vite): quasar.config > pwa > injectPwaMetaTags 現在也可以是一個函數:(({ pwaManifest, publicPath }) => string);
  • feat(app-vite): quasar.config > build > htmlMinifyOptions
  • feat(app-vite): 查詢正在使用的 vue devtools 的開啟埠;能夠使用 vue devtools 執行多個 cli 執行個體
  • perf(app-vite): 根據主機專案,以特定的 esm 或 cjs 形式呈現 SSR 範本;透過變數進行內插
  • perf(app-vite): 僅驗證 “dev” cmd 命令的 quasar.conf 伺服器位址
  • feat(app-vite): 為每個執行個體挑選新的 electron inspect 埠
  • feat(app-vite): Electron - 現在可以載入多個預載腳本
  • refactor(app-vite): AE 支援 - 更好且更有效率的演算法
  • feat(app-vite): AE 支援 ESM 格式
  • feat(app-vite): AE 支援 TS 格式 (透過建置步驟)
  • feat(app-vite): AE API 新方法 -> hasTypescript() / hasLint() / getStorePackageName() / getNodePackagerName()
  • feat(app-vite): AE -> Prompts API (以及提示預設匯出 fn 為非同步的能力)
  • refactor(app-vite): “clean” cmd 命令現在運作方式不同,因為 CLI 可以在同一個專案資料夾中的多個執行個體上執行 (開發或建置中的多種模式)
  • feat(app-vite): 支援 Bun 作為套件管理器 #16335
  • feat(app-vite): 針對預設 /src-ssr 範本 -> prod ssr -> 發生錯誤時,如果使用偵錯功能建置,則列印錯誤堆疊
  • feat(app-vite): 擴充 build > vitePlugins 形式 (額外的 { server?: boolean, client?: boolean } 參數

升級程序開始

建議

如果您不確定您不會不小心略過任何建議的變更,您可以隨時使用 @quasar/app-vite v2 beta 版搭建新的專案資料夾,然後輕鬆地從該處開始移植您的應用程式。大部分的變更都與不同的專案資料夾設定檔有關,而且主要**不是**與您的 /src 檔案有關。


$ yarn create quasar

當詢問到「Pick Quasar App CLI variant (挑選 Quasar App CLI 變體)」時,請回答:「Quasar App CLI with Vite 5 (BETA | next major version - v2) (Quasar App CLI 搭配 Vite 5 (BETA | 下一個主要版本 - v2))」。

準備工作

  • 如果使用 Quasar CLI 的全域安裝 (@quasar/cli),請確保您擁有最新的版本。這是因為支援多種格式的 quasar.config 檔案。

  • 再次強調,Node.js 的最低支援版本現在為 v18 (一律使用 Node.js 的 LTS 版本 - 版本越高越好)。

  • @quasar/app-vite 項目上編輯您的 /package.json,並將其指派為 ^2.0.0-beta.1

    /package.json

    "devDependencies": {
    - "@quasar/app-vite": "^1.0.0",
    + "@quasar/app-vite": "^2.0.0-beta.1"
    }

    然後執行 yarn/npm/pnpm/bun install。

  • 將您的 /quasar.config.js 檔案轉換為 ESM 格式 (建議使用此格式,否則請將檔案副檔名重新命名為 .cjs 並使用 CommonJs 格式)。

    /quasar.config.js 檔案

    import { configure } from 'quasar/wrappers'
    export default configure((/* ctx */) => {
      return {
        // ...
      }
    })

    關於 Typescript 的提示

    如果您願意,現在也可以使用 TS 撰寫此檔案 (將 /quasar.config.js 重新命名為 /quasar.config.ts – 請注意 .ts 檔案副檔名)。

  • 我們**強烈建議**在您的 /package.json 中將 type 設定為 module。Quasar CLI 將根據它來決定其建置的可散發檔案 (範例:ESM 或 CJS 形式的 Electron)。

    /package.json

    {
    + "type": "module"
    }

    如果您使用 `postcss.config.js` 檔案,請記得將其轉換為 ESM。此外,將 `.eslintrc.js` 重新命名為 `.eslintrc.cjs` (內容不變)。

  • 您可能會想要將下列項目新增至您的 /.gitignore 檔案。/quasar.config.*.temporary.compiled* 項目是指當您的 /quasar.config 檔案發生問題時,為了檢查目的而留下的檔案 (而且可以使用 quasar clean 命令移除)

    /.gitignore

    .DS_Store
    .thumbs.db
    node_modules
    
    # Quasar core related directories
    .quasar
    /dist
    /quasar.config.*.temporary.compiled*
    
    # local .env files
    .env.local*
    
    # Cordova related directories and files
    /src-cordova/node_modules
    /src-cordova/platforms
    /src-cordova/plugins
    /src-cordova/www
    
    # Capacitor related directories and files
    /src-capacitor/www
    /src-capacitor/node_modules
    
    # Log files
    npm-debug.log*
    yarn-debug.log*
    yarn-error.log*
    
    # Editor directories and files
    .idea
    *.suo
    *.ntvs*
    *.njsproj
    *.sln

  • 如果使用 Typescript,請確保您的 /tsconfig.json 檔案看起來像這樣

    {
      "extends": "@quasar/app-vite/tsconfig-preset",
      "compilerOptions": {
        "baseUrl": "."
      },
      "exclude": [
        "./dist",
        "./.quasar",
        "./node_modules",
        "./src-capacitor",
        "./src-cordova",
        "./quasar.config.*.temporary.compiled*"
      ]
    }

  • 必須從您的專案資料夾中刪除功能旗標檔案。它們需要重新產生 (將自動發生)。


    # in project folder root:
    $ npx rimraf -g ./**/*-flag.d.ts
    $ quasar build # or dev

Linting (TS 或 JS)

我們捨棄了對我們內部 linting (quasar.config 檔案 > eslint) 的支援,改用 vite-plugin-checker 套件。我們將在下方詳細說明您需要根據您是否使用 TS 進行的變更。

Typescript 專案 linting


$ yarn add --dev vite-plugin-checker vue-tsc@2 typescript
/.eslintignore

/dist
/src-capacitor
/src-cordova
/.quasar
/node_modules
.eslintrc.cjs
/quasar.config.*.temporary.compiled*

在您的專案資料夾根目錄中建立一個名為 tsconfig.vue-tsc.json 的新檔案

/tsconfig.vue-tsc.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "skipLibCheck": true
  }
}
/quasar.config 檔案

- eslint: {
-   // ...
- },

  build: {
    vitePlugins: [
+    ['vite-plugin-checker', {
+       vueTsc: {
+         tsconfigPath: 'tsconfig.vue-tsc.json'
+       },
+       eslint: {
+         lintCommand: 'eslint "./**/*.{js,ts,mjs,cjs,vue}"'
+       }
+     }, { server: false }]
    ]
  }

Javascript 專案 linting


$ yarn add --dev vite-plugin-checker
/.eslintignore

/dist
/src-capacitor
/src-cordova
/.quasar
/node_modules
.eslintrc.cjs
/quasar.config.*.temporary.compiled*
/quasar.config 檔案

- eslint: {
-   // ...
- },

  build: {
    vitePlugins: [
+    ['vite-plugin-checker', {
+       eslint: {
+         lintCommand: 'eslint "./**/*.{js,mjs,cjs,vue}"'
+       }
+     }, { server: false }]
    ]
  }

SPA / Capacitor / Cordova 模式變更

無需變更 /src/src-capacitor/src-cordova 資料夾中的任何內容。

PWA 模式變更

register-service-worker 相依性不再由 CLI 提供。您必須自行將其安裝在您的專案資料夾中。


$ yarn add register-service-worker@^1.0.0

編輯您的 /src-pwa/custom-service-worker.js 檔案

/src-pwa/custom-service-worker.js

if (process.env.MODE !== 'ssr' || process.env.PROD) {
  registerRoute(
    new NavigationRoute(
      createHandlerBoundToURL(process.env.PWA_FALLBACK_HTML),
-     { denylist: [/sw\.js$/, /workbox-(.)*\.js$/] }
+     { denylist: [new RegExp(process.env.PWA_SERVICE_WORKER_REGEX), /workbox-(.)*\.js$/] }
    )
  )
}

/quasar.config 檔案中也有一些細微的變更

/quasar.config 檔案

sourceFiles: {
- registerServiceWorker: 'src-pwa/register-service-worker',
- serviceWorker: 'src-pwa/custom-service-worker',
+ pwaRegisterServiceWorker: 'src-pwa/register-service-worker',
+ pwaServiceWorker: 'src-pwa/custom-service-worker',
+ pwaManifestFile: 'src-pwa/manifest.json',
  // ...
},

pwa: {
- workboxMode?: "generateSW" | "injectManifest";
+ workboxMode?: "GenerateSW" | "InjectManifest";

- // useFilenameHashes: false,
+ // Moved to quasar.config > build > useFilenameHashes

  /**
   * Auto inject the PWA meta tags?
   * If using the function form, return HTML tags as one single string.
   * @default true
   */
- injectPwaMetaTags?: boolean;
+ injectPwaMetaTags?: boolean | ((injectParam: InjectPwaMetaTagsParams) => string);
+ // see below for the InjectPwaMetaTagsParams interface

  // ...
}

// additional types for injectPwaMetaTags
interface InjectPwaMetaTagsParams {
  pwaManifest: PwaManifestOptions;
  publicPath: string;
}
interface PwaManifestOptions {
  id?: string;
  background_color?: string;
  categories?: string[];
  description?: string;
  // ...
}

Electron 模式變更

警告

可散發檔案 (您的生產程式碼) 將會編譯為 ESM 格式,因此也能利用 ESM 格式的 Electron。

提示

您可能會想要將 electron 套件升級到最新版本,以便它可以處理 ESM 格式。

大部分的變更都與編輯您的 /src-electron/electron-main.js 檔案有關

圖示路徑

+import { fileURLToPath } from 'node:url'

+const currentDir = fileURLToPath(new URL('.', import.meta.url))

function createWindow () {
  mainWindow = new BrowserWindow({
-   icon: path.resolve(__dirname, 'icons/icon.png'), // tray icon
+   icon: path.resolve(currentDir, 'icons/icon.png'), // tray icon
    // ...
  })
預載腳本

import { fileURLToPath } from 'node:url'

const currentDir = fileURLToPath(new URL('.', import.meta.url))

function createWindow () {
  mainWindow = new BrowserWindow({
    // ...
    webPreferences: {
-     preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
+     preload: path.resolve(
+       currentDir,
+       path.join(process.env.QUASAR_ELECTRON_PRELOAD_FOLDER, 'electron-preload' + process.env.QUASAR_ELECTRON_PRELOAD_EXTENSION)
+     )
    }
  })

警告

編輯 /quasar.config.js 以指定您的預載腳本

/quasar.config 檔案

sourceFiles: {
- electronPreload?: string;
},

electron: {
+ // Electron preload scripts (if any) from /src-electron, WITHOUT file extension
+ preloadScripts: [ 'electron-preload' ],
}

如您所見,如果您需要,現在可以指定多個預載腳本。
function createWindow () {
   // ...
-  mainWindow.loadURL(process.env.APP_URL)
+  if (process.env.DEV) {
+    mainWindow.loadURL(process.env.APP_URL)
+  } else {
+    mainWindow.loadFile('index.html')
+  }

最後,新檔案應如下所示

新的 /src-electron/electron-main.js

import { app, BrowserWindow } from 'electron'
import path from 'node:path'
import os from 'node:os'
import { fileURLToPath } from 'node:url'

// needed in case process is undefined under Linux
const platform = process.platform || os.platform()

const currentDir = fileURLToPath(new URL('.', import.meta.url))

let mainWindow

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    icon: path.resolve(currentDir, 'icons/icon.png'), // tray icon
    width: 1000,
    height: 600,
    useContentSize: true,
    webPreferences: {
      contextIsolation: true,
      // More info: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script
      preload: path.resolve(
        currentDir,
        path.join(process.env.QUASAR_ELECTRON_PRELOAD_FOLDER, 'electron-preload' + process.env.QUASAR_ELECTRON_PRELOAD_EXTENSION)
      )
    }
  })

  if (process.env.DEV) {
    mainWindow.loadURL(process.env.APP_URL)
  } else {
    mainWindow.loadFile('index.html')
  }

  if (process.env.DEBUGGING) {
    // if on DEV or Production with debug enabled
    mainWindow.webContents.openDevTools()
  } else {
    // we're on production; no access to devtools pls
    mainWindow.webContents.on('devtools-opened', () => {
      mainWindow.webContents.closeDevTools()
    })
  }

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

SSR 模式變更

警告

發行版本(您的生產程式碼)將會編譯為 ESM 格式。

大多數的變更都與編輯您的 /src-ssr/server.js 檔案有關。由於您現在在開發應用程式時也可以使用 HTTPS,因此您需要對該檔案進行以下變更

/src-ssr/server.js > listen

- export const listen = ssrListen(async ({ app, port, isReady }) => {
+ // notice: devHttpsApp param which will be a Node httpsServer (on DEV only) and if https is enabled
+ // notice: no "isReady" param (starting with 2.0.0-beta.16+)
+ // notice: ssrListen() param can still be async (below it isn't)
+ export const listen = ssrListen(({ app, devHttpsApp, port }) => {
-   await isReady()
-   return app.listen(port, () => {
+   const server = devHttpsApp || app
+   return server.listen(port, () => {
      if (process.env.PROD) {
        console.log('Server listening at port ' + port)
      }
    })
  })

最後,這就是它現在應該呈現的樣子

/src-ssr/server.js > listen

export const listen = ssrListen(({ app, devHttpsApp, port }) => {
  const server = devHttpsApp || app
  return server.listen(port, () => {
    if (process.env.PROD) {
      console.log('Server listening at port ' + port)
    }
  })
})

對於無伺服器方法,這是 “listen” 部分應該呈現的樣子

/src-ssr/server.js > listen

export const listen = ssrListen(({ app, devHttpsApp, port }) => {
  if (process.env.DEV) {
    const server = devHttpsApp || app;
    return server.listen(port, () => {
      console.log('Server listening at port ' + port)
    })
  }
  else { // in production
    // return an object with a "handler" property
    // that the server script will named-export
    return { handler: app }
  }
})

接下來,serveStaticContent 函式已變更

/src-ssr/server.js > serveStaticContent

- export const serveStaticContent = ssrServeStaticContent((path, opts) => {
-  return express.static(path, { maxAge, ...opts })
- })

+ /**
+ * Should return a function that will be used to configure the webserver
+ * to serve static content at "urlPath" from "pathToServe" folder/file.
+ *
+ * Notice resolve.urlPath(urlPath) and resolve.public(pathToServe) usages.
+ *
+ * Can be async: ssrServeStaticContent(async ({ app, resolve }) => {
+ * Can return an async function: return async ({ urlPath = '/', pathToServe = '.', opts = {} }) => {
+ */
+ export const serveStaticContent = ssrServeStaticContent(({ app, resolve }) => {
+  return ({ urlPath = '/', pathToServe = '.', opts = {} }) => {
+    const serveFn = express.static(resolve.public(pathToServe), { maxAge, ...opts })
+    app.use(resolve.urlPath(urlPath), serveFn)
+  }
+ })

此外,renderPreloadTag() 函式現在可以接受一個額外的參數 (ssrContext)

/src-ssr/server.js

export const renderPreloadTag = ssrRenderPreloadTag((file, { ssrContext }) => {
  // ...
})

對於 TS 開發者,您也應該對您的 /src-ssr/middlewares 檔案進行一些小變更,如下所示

對於 TS 開發者

+ import { Request, Response } from 'express';
// ...
- app.get(resolve.urlPath('*'), (req, res) => {
+ app.get(resolve.urlPath('*'), (req: Request, res: Response) => {

/quasar.config 檔案中也有一些新增內容

/quasar.config 檔案

ssr: {
  // ...

  /**
   * When using SSR+PWA, this is the name of the
   * PWA index html file that the client-side fallbacks to.
   * For production only.
   *
   * Do NOT use index.html as name as it will mess SSR up!
   *
   * @default 'offline.html'
   */
- ssrPwaHtmlFilename?: string;
+ pwaOfflineHtmlFilename?: string;

  /**
   * Tell browser when a file from the server should expire from cache
   * (the default value, in ms)
   * Has effect only when server.static() is used
   */
- maxAge?: number;

  /**
   * Extend/configure the Workbox GenerateSW options
   * Specify Workbox options which will be applied on top of
   *  `pwa > extendGenerateSWOptions()`.
   * More info: https://developer.chrome.com/docs/workbox/the-ways-of-workbox/
   */
+ pwaExtendGenerateSWOptions?: (config: object) => void;

  /**
   * Extend/configure the Workbox InjectManifest options
   * Specify Workbox options which will be applied on top of
   *  `pwa > extendInjectManifestOptions()`.
   * More info: https://developer.chrome.com/docs/workbox/the-ways-of-workbox/
   */
+ pwaExtendInjectManifestOptions?: (config: object) => void;
}

Bex 模式變更

無需變更任何內容,但是我們在此重點說明 /quasar.conf 檔案中的新增內容

/quasar.config 檔案

sourceFiles: {
+ bexManifestFile: 'src-bex/manifest.json',
  // ...
},

其他 /quasar.config 檔案變更

來自 /quasar.config 檔案的 ctx 具有一個額外的屬性 (appPaths)

import { configure } from 'quasar/wrappers'
export default configure((ctx) => ({
  // ctx.appPaths is available

ctx.appPaths 的定義使用 QuasarAppPaths TS 型別定義如下

export interface IResolve {
  cli: (dir: string) => string;
  app: (dir: string) => string;
  src: (dir: string) => string;
+ public: (dir: string) => string;
  pwa: (dir: string) => string;
  ssr: (dir: string) => string;
  cordova: (dir: string) => string;
  capacitor: (dir: string) => string;
  electron: (dir: string) => string;
  bex: (dir: string) => string;
}

export interface QuasarAppPaths {
  cliDir: string;
  appDir: string;
  srcDir: string;
+ publicDir: string;
  pwaDir: string;
  ssrDir: string;
  cordovaDir: string;
  capacitorDir: string;
  electronDir: string;
  bexDir: string;

  quasarConfigFilename: string;
+ quasarConfigInputFormat: "esm" | "cjs" | "ts";
+ quasarConfigOutputFormat: "esm" | "cjs";

  resolve: IResolve;
}
/quasar.config > eslint

eslint: {
  /**
   * Enable or disable caching of the linting results.
   * @default true
   */
+ cache?: boolean;

  /**
   * Formatter to use
   * @default 'stylish'
   */
+ formatter?: ESLint.Formatter;
}
/quasar.config > sourceFiles

sourceFiles: {
+ bexManifestFile?: string;
}
/quasar.config > framework

framework: {
  /**
   * Auto import - how to detect components in your vue files
   *   "kebab": q-carousel q-page
   *   "pascal": QCarousel QPage
   *   "combined": q-carousel QPage
   * @default 'kebab'
   */
  autoImportComponentCase?: "kebab" | "pascal" | "combined";

  /**
   * Auto import - which file extensions should be interpreted as referring to Vue SFC?
   * @default [ 'vue' ]
   */
+ autoImportVueExtensions?: string[];

  /**
   * Auto import - which file extensions should be interpreted as referring to script files?
   * @default [ 'js', 'jsx', 'ts', 'tsx' ]
   */
+ autoImportScriptExtensions?: string[];

  /**
   * Treeshake Quasar's UI on dev too?
   * Recommended to leave this as false for performance reasons.
   * @default false
   */
+ devTreeshaking?: boolean;
+ // was previously under /quasar.conf > build
}
/quasar.config > build

build: {
  /**
   * Treeshake Quasar's UI on dev too?
   * Recommended to leave this as false for performance reasons.
   * @default false
   */
- devTreeshaking?: boolean;
- // moved under /quasar.conf > framework

  /**
   * Should we invalidate the Vite and ESLint cache on startup?
   * @default false
   */
- rebuildCache?: boolean;

  /**
   * Automatically open remote Vue Devtools when running in development mode.
   */
+ vueDevtools?: boolean;

  /**
   * Folder where Quasar CLI should look for .env* files.
   * Can be an absolute path or a relative path to project root directory.
   *
   * @default project root directory
   */
+ envFolder?: string;
  /**
   * Additional .env* files to be loaded.
   * Each entry can be an absolute path or a relative path to quasar.config > build > envFolder.
   *
   * @example ['.env.somefile', '../.env.someotherfile']
   */
+ envFiles?: string[];
}

其他考量

您可能想要升級/從 @intlify/vite-plugin-vue-i18n 切換到更新的 @intlify/unplugin-vue-i18n

在移除舊套件並安裝新套件後,然後如下更新您的 /quasar.config 檔案

/quasar.config

- import path from 'node:path'
+ import { fileURLToPath } from 'node:url'

export default configure((ctx) => {
  return {
    build: {
      vitePlugins: [
-       ['@intlify/vite-plugin-vue-i18n', {
+       ['@intlify/unplugin-vue-i18n/vite', {
-         include: path.resolve(__dirname, './src/i18n/**')
+         include: [ fileURLToPath(new URL('./src/i18n', import.meta.url)) ],
+         ssr: ctx.modeName === 'ssr'
        }]
      ]
    }
  }
})

env 點檔案支援

稍微擴展一下 env 點檔案支援。這些檔案將被偵測到並使用(順序很重要)

.env                                # loaded in all cases
.env.local                          # loaded in all cases, ignored by git
.env.[dev|prod]                     # loaded for dev or prod only
.env.local.[dev|prod]               # loaded for dev or prod only, ignored by git
.env.[quasarMode]                   # loaded for specific Quasar CLI mode only
.env.local.[quasarMode]             # loaded for specific Quasar CLI mode only, ignored by git
.env.[dev|prod].[quasarMode]        # loaded for specific Quasar CLI mode and dev|prod only
.env.local.[dev|prod].[quasarMode]  # loaded for specific Quasar CLI mode and dev|prod only, ignored by git

…其中 “被 git 忽略” 假設為發布此套件後建立的預設專案資料夾,否則將 .env.local* 新增到您的 /.gitignore 檔案中。

您也可以設定以上檔案從不同的資料夾中選取,甚至將更多檔案新增到清單中

/quasar.config 檔案

build: {
  envFolder: './' // absolute or relative path to root project folder
  envFiles: [
    // Path strings to your custom files --- absolute or relative path to root project folder
  ]
}