API 浏览器
Quasar CLI with Vite - @quasar/app-vite
浏览器兼容性

为了为你的应用配置浏览器兼容性,你需要编辑 /quasar.config 文件:

¥In order to configure the browser compatibility for your app, you will need to edit the /quasar.config file:

/quasar.config file

build: {
  target: {
    browser: [ 'es2022', 'firefox115', 'chrome115', 'safari14' ],
    node: 'node20'
  }
}

根据你将使用的 Quasar 模式(SPA/SSR/PWA/Electron/… 等),你将拥有客户端文件(在浏览器中运行)以及可能的 Node.js 运行文件。这就是上面 target 对象中两个键的用途。

¥Based on the Quasar Mode that you will be using (SPA/SSR/PWA/Electron/… etc) you will have client-side files (that run in the browser) and possibly Node.js running files. This is what the two keys of target Object above are for.

此外,无论此配置如何,你都需要决定是否需要 模块预加载 polyfill,因为所有脚本标签都将作为模块注入。默认情况下,polyfill 不包含在内:

¥Also, independent of this configuration, you need to decide if you want the module preload polyfill since all the script tags will be injected as modules. By default, the polyfill is NOT included:

/quasar.config file

build: {
  polyfillModulePreload: false
}

此外,根据你的 /postcss.config.js 文件内容,你的 CSS 也将通过 autoprefixer 进行处理,你可以为其配置你感兴趣的浏览器级别:

¥Furthermore, based on your /postcss.config.js file content, your CSS will also pass through autoprefixer for which you can configure the browser levels that you are interested in:

/postcss.config.js

autoprefixer({
  overrideBrowserslist: [
    'last 4 Chrome versions',
    'last 4 Firefox versions',
    'last 4 Edge versions',
    'last 4 Safari versions',
    'last 4 Android versions',
    'last 4 ChromeAndroid versions',
    'last 4 FirefoxAndroid versions',
    'last 4 iOS versions'
  ]
})

更多关于如何指定 autoprefixer 浏览器范围的信息:browserslist

¥More info on how to specify autoprefixer browser ranges: browserslist.