Vue 2容器化后多次出现开发模式提示及$attrs/$listeners问题求助

核心问题本质 #

容器化后出现的两个异常，根源都是重复加载Vue实例/版本：

• 多次出现"You are running Vue in development mode."：说明至少3个独立Vue实例被初始化
• draggable组件触发$attrs/$listeners只读警告：第三方包内部引入了独立Vue实例，与项目主Vue版本产生冲突

针对性解决思路 #

1. 修复Docker卷挂载路径冲突 #

你的docker-compose.yml中，项目挂载路径为/opt/apps/projectx，但node_modules卷挂载的是/opt/app/node_modules/，路径不匹配会导致容器内同时存在两个依赖目录：宿主机同步的/opt/apps/projectx/node_modules和卷挂载的/opt/app/node_modules，构建工具可能从不同目录加载Vue，引发重复实例。

操作步骤：
调整卷挂载路径为项目根目录下的node_modules：

volumes:
  - '.:/opt/apps/projectx'
  - '/opt/apps/projectx/node_modules/'

删除旧卷并重新启动容器：

docker-compose down -v
docker-compose up --build

2. 强制第三方依赖使用项目根Vue #

部分第三方包（如vuedraggable）可能内置Vue依赖，或安装时拉取独立版本。通过webpack配置强制所有依赖使用项目根的Vue：

// webpack.mix.js中扩展配置
mix.webpackConfig({
  resolve: {
    alias: {
      'vue$': path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
    }
  },
  // 禁止webpack自动解析第三方包中的Vue
  module: {
    noParse: /vue\.js$/
  }
});

同时在package.json中添加resolutions强制统一Vue版本（需npm >=7或使用yarn）：

"resolutions": {
  "vue": "2.6.14" // 替换为你项目使用的Vue版本
}

执行npm install重新安装依赖。

3. 清理容器内构建缓存 #

容器内npm run watch可能残留旧构建缓存，导致重复加载：

# 进入前端容器
docker exec -it frontend bash
# 清理mix缓存和node_modules缓存
rm -rf public/js/*.hot-update.*
rm -rf node_modules/.cache
# 无缓存重新构建
npm run watch --no-cache

4. 验证多页面入口的Vue导入逻辑 #

若项目为多页面应用，检查每个页面入口：

• 是否都通过bootstrap.js引入Vue，而非单独导入
• 排查是否存在require('vue')等隐性重复导入

5. 统一容器内NODE_ENV环境变量 #

确保容器内NODE_ENV与旧环境一致，避免构建模式差异：
在docker-compose.yml中添加：

environment:
  - NODE_ENV=development

或在Dockerfile中设置：

ENV NODE_ENV=development

6. 排查Nginx静态资源加载配置 #

检查Nginx反向代理配置：

• 确保每个页面只加载一次打包后的Vue入口文件（如app.js）
• 验证是否存在CDN缓存旧打包文件，导致重复加载

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