@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
"devDependencies": { - "@quasar/app-vite": "^1.0.0", + "@quasar/app-vite": "^2.0.0-beta.1" }
content_paste
然後執行 yarn/npm/pnpm/bun install。將您的
/quasar.config.js
檔案轉換為 ESM 格式 (建議使用此格式,否則請將檔案副檔名重新命名為.cjs
並使用 CommonJs 格式)。import { configure } from 'quasar/wrappers' export default configure((/* ctx */) => { return { // ... } })
content_paste關於 Typescript 的提示
如果您願意,現在也可以使用 TS 撰寫此檔案 (將
/quasar.config.js
重新命名為/quasar.config.ts
– 請注意.ts
檔案副檔名)。我們**強烈建議**在您的
/package.json
中將type
設定為module
。Quasar CLI 將根據它來決定其建置的可散發檔案 (範例:ESM 或 CJS 形式的 Electron)。{ + "type": "module" }
content_paste
如果您使用 `postcss.config.js` 檔案,請記得將其轉換為 ESM。此外,將 `.eslintrc.js` 重新命名為 `.eslintrc.cjs` (內容不變)。您可能會想要將下列項目新增至您的
/.gitignore
檔案。/quasar.config.*.temporary.compiled*
項目是指當您的/quasar.config
檔案發生問題時,為了檢查目的而留下的檔案 (而且可以使用quasar clean
命令移除).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
content_paste如果使用 Typescript,請確保您的
/tsconfig.json
檔案看起來像這樣{ "extends": "@quasar/app-vite/tsconfig-preset", "compilerOptions": { "baseUrl": "." }, "exclude": [ "./dist", "./.quasar", "./node_modules", "./src-capacitor", "./src-cordova", "./quasar.config.*.temporary.compiled*" ] }
content_paste必須從您的專案資料夾中刪除功能旗標檔案。它們需要重新產生 (將自動發生)。
# in project folder root: $ npx rimraf -g ./**/*-flag.d.ts $ quasar build # or dev
content_paste
Linting (TS 或 JS)
我們捨棄了對我們內部 linting (quasar.config 檔案 > eslint) 的支援,改用 vite-plugin-checker 套件。我們將在下方詳細說明您需要根據您是否使用 TS 進行的變更。
Typescript 專案 linting
$ yarn add --dev vite-plugin-checker vue-tsc@2 typescript
/dist
/src-capacitor
/src-cordova
/.quasar
/node_modules
.eslintrc.cjs
/quasar.config.*.temporary.compiled*
在您的專案資料夾根目錄中建立一個名為 tsconfig.vue-tsc.json
的新檔案
{
"extends": "./tsconfig.json",
"compilerOptions": {
"skipLibCheck": true
}
}
- 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
/dist
/src-capacitor
/src-cordova
/.quasar
/node_modules
.eslintrc.cjs
/quasar.config.*.temporary.compiled*
- 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
檔案
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
檔案中也有一些細微的變更
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
以指定您的預載腳本
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')
+ }
最後,新檔案應如下所示
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,因此您需要對該檔案進行以下變更
- 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)
}
})
})
最後,這就是它現在應該呈現的樣子
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” 部分應該呈現的樣子
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
函式已變更
- 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
)
export const renderPreloadTag = ssrRenderPreloadTag((file, { ssrContext }) => {
// ...
})
對於 TS 開發者,您也應該對您的 /src-ssr/middlewares 檔案進行一些小變更,如下所示
+ import { Request, Response } from 'express';
// ...
- app.get(resolve.urlPath('*'), (req, res) => {
+ app.get(resolve.urlPath('*'), (req: Request, res: Response) => {
在 /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
檔案中的新增內容
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;
}
eslint: {
/**
* Enable or disable caching of the linting results.
* @default true
*/
+ cache?: boolean;
/**
* Formatter to use
* @default 'stylish'
*/
+ formatter?: ESLint.Formatter;
}
sourceFiles: {
+ bexManifestFile?: string;
}
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
}
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
檔案
- 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
檔案中。
您也可以設定以上檔案從不同的資料夾中選取,甚至將更多檔案新增到清單中
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
]
}