Quasar(Webpack/Vite)项目动态引入/排除Capacitor插件问题

Webpack 配置方案 #

1. 安装null-loader：

   npm install null-loader --save-dev
   

2. 修改quasar.conf.js，在chainWebpack中根据环境变量添加忽略规则：

   chainWebpack: (config) => {
     if (process.env.MODE === 'spa') {
       // 忽略所有@capacitor开头的模块
       config.module.rules.add({
         test: /@capacitor\/.*/,
         use: 'null-loader'
       })
     }
   }
   

3. 代码层面避免静态导入，改用条件动态导入：

   mounted() {
     if (process.env.MODE === 'capacitor') {
       import('@capacitor/splash-screen').then(({ SplashScreen }) => {
         // 执行SplashScreen相关逻辑
         SplashScreen.hide();
       })
     }
   }
   

Vite 配置方案 #

1. 在项目根目录创建一个空模块文件，比如src/empty-capacitor.js：

   export default {}
   

2. 修改quasar.conf.js中的Vite配置，添加别名规则：

   vite: {
     resolve: {
       alias: {
         ...(process.env.MODE === 'spa' ? {
           '@capacitor/splash-screen': path.resolve(__dirname, 'src/empty-capacitor.js'),
           // 其他Capacitor插件需忽略的话，同样添加别名
           '@capacitor/core': path.resolve(__dirname, 'src/empty-capacitor.js')
         } : {})
       }
     }
   }
   

3. 代码层面使用条件动态导入（和Webpack方案中的代码一致），确保SPA模式下不会触发Capacitor模块的加载。

另外，可在quasar.conf.js的env字段中显式声明环境变量，确保Quasar能正确识别：

env: {
  MODE: process.env.MODE
}

内容的提问来源于stack exchange，提问作者Barty