为何import.meta.env.PROD代码在开发模式下运行？脚本配置疑问

问题场景 #

package.json中的运行脚本：

"build-watch-dev": "vite build --mode development --watch"

代码示例：

import { useStore } from '@/store';
import { register } from 'register-service-worker';

export function registerSW() {
    if (import.meta.env.PROD) {
        register(`${import.meta.env.BASE_URL}service-worker.js`, {
            ready() {
                console.log(
                    'App is being served from cache by a service worker.\n' +
                    'For more details, visit '
                )
            },
            registered() {
                console.log('Service worker has been registered.')
            },
            cached() {
                console.log('Content has been cached for offline use.')
            },
            updatefound() {
                console.log('New content is downloading.')
            },
            updated() {
                console.log('New content is available; please refresh.');
                const $store = useStore();
                $store.serviceWorkerUpdate = true;
            },
            offline() {
                console.log('No internet connection found. App is running in offline mode.')
            },
            error(error) {
                const $store = useStore();
                if ($store.isOnline) {
                    console.error('Error during service worker registration:', error)
                }
            }
        })
    }
}

问题说明：代码通过import.meta.env.PROD判断是否注册Service Worker，但使用上述脚本运行时，该逻辑在开发模式下触发，需排查原因。

原因分析 #

• Vite的build命令本质是生产构建：不管指定什么--mode参数，只要执行vite build，Vite就会默认开启生产环境模式，此时import.meta.env.PROD会被设为true。--mode参数仅用于加载对应环境的配置文件（比如.env.development），不会改变构建的生产/开发模式属性。
• 混淆了mode与env.PROD的关系：--mode是环境配置的标识，而import.meta.env.PROD由构建命令决定——vite dev对应开发模式（PROD=false），vite build对应生产模式（PROD=true），二者没有绑定关系。

解决方案 #

如果要在开发模式下禁用Service Worker注册，同时保留build --watch的监听功能，可选择以下两种方式：

1. 自定义环境变量判断：在.env.development中添加VITE_SW_ENABLED=false，代码中改为判断该变量：

if (import.meta.env.VITE_SW_ENABLED === 'true') {
  // Service Worker注册逻辑
}

2. 强制覆盖PROD变量：在运行脚本中手动设置环境变量，强制PROD=false：

"build-watch-dev": "PROD=false vite build --mode development --watch"

（Windows系统需改为set PROD=false && vite build --mode development --watch）

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