建置系統使用 Vite 來建立您的網站/應用程式的 UI (/src 資料夾)。如果您不熟悉 Vite，請別擔心。開箱即用，您不需要設定它，因為它已經設定好一切。
更新 Vite 設定
您可能已經注意到您的搭配 Vite 的 Quasar CLI 專案中不存在 vite.config.js / vite.config.ts 檔案。這是因為 Quasar CLI 為您產生 Vite 設定，讓您不必擔心。
如果您需要調整它，您可以透過 quasar.config 檔案 > build > extendViteConf 來執行，如下所示
// use mergeConfig helper to avoid overwriting the default config
const { mergeConfig } = require('vite')
// ...
build: {
extendViteConf (viteConf, { isServer, isClient }) {
// example: change the chunk size warning limit
viteConf.build = mergeConfig(viteConf.build, {
chunkSizeWarningLimit: 750
})
// equivalent of following vite.config.js/vite.config.ts:
// export default defineConfig({
// build: {
// chunkSizeWarningLimit: 750
// }
// })
}
}請注意，您不需要傳回任何內容。extendViteConf(viteConf) 的參數是 Quasar 為您產生的 Vite 設定物件。您可以新增/移除/取代其中的幾乎任何內容，前提是您真的知道自己在做什麼。但是，請勿篡改輸入和輸出檔案，或任何其他已由 quasar.config file > build 設定的選項。
如果您想要新增一些 Vite 外掛程式，請參閱下方的新增 Vite 外掛程式章節。
檢查 Vite 設定
Quasar CLI 為此提供了一個有用的命令
$ quasar inspect -h
Description
Inspect Quasar generated Vite config
Usage
$ quasar inspect
$ quasar inspect -c build
$ quasar inspect -m electron -p 'build.outDir'
Options
--cmd, -c Quasar command [dev|build] (default: dev)
--mode, -m App mode [spa|ssr|pwa|bex|cordova|capacitor|electron] (default: spa)
--depth, -d Number of levels deep (default: 2)
--path, -p Path of config in dot notation
Examples:
-p module.rules
-p plugins
--thread, -t Display only one specific app mode config thread
--help, -h Displays this message新增 Vite 外掛程式@quasar/app-vite 1.8+
請務必使用 yarn/npm 安裝您要使用的 vite 外掛程式套件，然後編輯 /quasar.config 檔案
build: {
vitePlugins: [
// both are perfectly equivalent:
[ '<plugin-name>', { /* plugin options */ } ],
[ '<plugin-name>', { /* plugin options */ }, { server: true, client: true } ]
]
}您可以停用用戶端或伺服器端的外掛程式，這在開發 SSR 應用程式時特別有用
build: {
vitePlugins: [
// disable on the server-side:
[ '<plugin-name>', { /* plugin options */ }, { server: false } ],
// disable on the client-side:
[ '<plugin-name>', { /* plugin options */ }, { client: false } ]
]
}支援多種語法
vitePlugins: [
[ '<plugin1-name>', { /* plugin1 options */ }, { server: true, client: true } ],
[ '<plugin2-name>', { /* plugin2 options */ }, { server: true, client: true } ],
// ...
]
// or:
vitePlugins: [
[ require('<plugin1-name>'), { /* plugin1 options */ }, { server: true, client: true } ],
[ require('<plugin2-name>'), { /* plugin2 options */ }, { server: true, client: true } ],
// ...
]
// finally, you can specify using the form below,
// but this one has a drawback in that Quasar CLI cannot pick up
// when you change the options param so you'll have to manually
// restart the dev server
vitePlugins: [
require('<plugin1-name>')({ /* plugin1 options */ }),
require('<plugin2-name>')({ /* plugin2 options */ })
// ...
]提示
您實際上可能會遇到需要使用 require('<package-name>').default 而不是 require('<package-name>') 的 Vite 外掛程式。所以
vitePlugins: [
[ require('<plugin1-name>').default, { /* plugin1 options */ } ],
// ...
]而且，如果您願意，您也可以透過 /quasar.config 檔案中的 extendViteConf() 新增 Vite 外掛程式。這對於 (但不限於) SSR 模式特別有用，在 SSR 模式中，您會希望 Vite 外掛程式僅應用於伺服器端或用戶端
build: {
extendViteConf (viteConf, { isClient, isServer }) {
viteConf.plugins.push(
require('<plugin1-name>')({ /* plugin1 options */ }),
require('<plugin2-name>')({ /* plugin2 options */ })
// ...
)
}
}此外，別忘了您的 /quasar.config 檔案匯出一個接收 ctx 作為參數的函式。您可以在整個設定檔中使用它，僅將設定套用至特定 Quasar 模式或僅套用至開發或生產環境
module.exports = function (ctx) {
return {
build: {
extendViteConf (viteConf, { isClient, isServer }) {
if (ctx.mode.pwa) {
viteConf.plugins.push(/* ... */)
}
if (ctx.dev) {
viteConf.plugins.push(/* ... */)
}
}
}
}
}範例：rollup-plugin-copy
您可能需要在建置到生產環境的過程中將靜態或外部檔案複製到您的 Quasar 專案中，rollup-plugin-copy 允許您在建置應用程式時複製檔案和資料夾。
// ...
build: {
// ...
vitePlugins: [
[
'rollup-plugin-copy', {
targets: [
{ // Syntax code, check doc in https://www.npmjs.com/package/rollup-plugin-copy
src: '[ORIGIN_PATH]',
dest: '[DEST_PATH]'
},
{ // Copying firebase-messaging-sw.js to SPA/PWA/SSR dest build folder
src: 'config/firebase/firebase-messaging-sw.js',
dest: 'dest/spa' // example when building SPA
}
]
}
]
// other vite/rollup plugins
]
}
// ...Vite Vue Plugin 選項
如果您需要調整 Vite Vue Plugin(@vitejs/plugin-vue) 選項，您可以透過 quasar.config file > build > viteVuePluginOptions 來執行，如下所示
build: {
viteVuePluginOptions: {
script: {
// example: enable experimental props destructuring
propsDestructure: true
},
template: {
compilerOptions: {
// example: enable custom/web element tag detection
isCustomElement: (tag) => tag.startsWith('my-')
}
}
}
}資料夾別名
Quasar 隨附一堆預先設定好的實用資料夾別名。您可以在專案中的任何位置使用它們，Vite 將解析正確的路徑。
| 別名 | 解析為 |
|---|---|
src | /src |
app | / |
components | /src/components |
layouts | /src/layouts |
pages | /src/pages |
assets | /src/assets |
boot | /src/boot |
stores | /src/stores (Pinia stores) |
新增資料夾別名
我們將使用 utils 作為範例，它可以作為 import { formatTime } from 'utils/time' 使用。有兩種方法可以新增資料夾別名
- 透過
/quasar.config file > build > alias屬性。這是新增資料夾別名的最簡單方法。使用 Node 的path.join輔助程式來取得別名的絕對路徑。範例
const path = require('node:path')
module.exports = function (ctx) {
return {
build: {
alias: {
utils: path.join(__dirname, './src/utils')
}
}
}
}- 直接擴充 Vite 設定。請勿直接指派給
viteConf.resolve.alias以保留內建別名，請改用Object.assign。使用 Node 的path.join輔助程式來解析您預期的別名的路徑。
const path = require('node:path')
module.exports = function (ctx) {
return {
build: {
extendViteConf (viteConf, { isServer, isClient }) {
Object.assign(viteConf.resolve.alias, {
utils: path.join(__dirname, './src/utils')
})
}
}
}
}搭配 TypeScript 使用
如果您使用 TypeScript，您也必須將您在 quasar.config file 中定義的別名新增至您的 tsconfig.json 檔案。為了保留內建別名，您必須在您的 tsconfig.json 檔案中重新定義它們。範例
{
"extends": "@quasar/app-vite/tsconfig-preset",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"src/*": ["src/*"],
"app/*": ["*"],
"components/*": ["src/components/*"],
"layouts/*": ["src/layouts/*"],
"pages/*": ["src/pages/*"],
"assets/*": ["src/assets/*"],
"boot/*": ["src/boot/*"],
"stores/*": ["src/stores/*"],
"utils/*": ["src/utils/*"]
}
}
}如果您想要使用 tsconfig.json 作為事實來源，並讓 Vite 從那裡自動擷取它們，您可以使用 vite-tsconfig-paths 外掛程式。這樣一來，您就不必在每次新增別名時都更新 quasar.config file 和 tsconfig.json，避免潛在的錯誤。請依照連結中的指示安裝它，然後將它新增至您的 quasar.config file
module.exports = function (ctx) {
return {
build: {
// no longer needed to define aliases here
// alias: {},
vitePlugins: [
['vite-tsconfig-paths', {
// projects: ['./tsconfig.json', '../../tsconfig.json'] // if you have multiple tsconfig files (e.g. in a monorepo)
}]
]
}
}
}PostCSS
*.vue 檔案中的樣式 (和所有其他樣式檔案) 預設會透過 PostCSS 傳輸，因此您不需要為其使用特定的載入器。
預設情況下，PostCSS 設定為使用 Autoprefixer。請查看 /postcss.config.cjs，如果您需要，可以在其中調整它。