Parcel.js v2搭建Vue3项目如何设置全局特性标志？

配置步骤 #

1. 注入全局常量 #

直接在项目根目录的 package.json 中添加 Parcel 专属的 define 配置项，注入 Vue 要求的两个特性标志：

{
  "name": "your-vue-project",
  "version": "1.0.0",
  "dependencies": {
    "vue": "^3.x"
  },
  "parcel": {
    "define": {
      "__VUE_OPTIONS_API__": true,
      "__VUE_PROD_DEVTOOLS__": false
    }
  }
}

参数说明：

• __VUE_OPTIONS_API__：是否启用选项式API支持。仅使用组合式API的项目可设为false，生产构建时可摇掉选项式API相关代码，减小包体积
• __VUE_PROD_DEVTOOLS__：是否在生产环境启用Vue Devtools。日常开发场景下无需修改，如需生产环境调试可设为true

2. TypeScript 适配（可选，仅TS项目需要） #

如果项目使用TypeScript，需要新增全局类型声明避免类型报错，在根目录新建vue-flag.d.ts文件，写入以下内容：

declare const __VUE_OPTIONS_API__: boolean;
declare const __VUE_PROD_DEVTOOLS__: boolean;

3. 重启开发服务 #

Parcel 会缓存历史构建产物，修改配置后需要清除缓存重启服务：
npx parcel serve index.html --no-cache

操作完成后控制台警告会自动消失，开发环境下Vue Devtools也会恢复可用状态，生产构建时也会正常执行tree-shaking优化。

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