Vue+Django项目Uncaught TypeError及版本不匹配问题求助

问题根源 #

你的项目混合了Vue3与Vue2的工具链和生态插件，导致版本不兼容、依赖解析失败，进而引发运行时和编译错误。

错误原因拆解 #

1. Uncaught TypeError: Cannot read properties of undefined (reading 'install') #

该错误触发于Vue.use()调用，本质是：

• 你使用了Vue3，但引入的vue-native-websocket是Vue2专属插件，依赖Vue2全局API结构，在Vue3中无法正常识别；
• webpack配置使用了Vue2版本的vue-loader@15.x和vue-template-compiler，编译后的Vue实例结构异常，导致Vue.use无法找到正确的插件入口。

2. Vue版本不匹配与安装失败 #

• vue-template-compiler是Vue2专属模板编译工具，Vue3已废弃该包并改用@vue/compiler-sfc，因此不存在vue-template-compiler@3.3.4版本，这是安装失败的直接原因；
• vue-loader@15.10.1是Vue2版本，无法适配Vue3的编译流程，导致webpack打包时触发版本不匹配报错。

分步解决方案 #

步骤1：更新依赖包（修改package.json） #

删除Vue2相关工具，替换为Vue3兼容的依赖：

• 移除vue-template-compiler、vue-loader@15.x、vue-native-websocket；
• 添加Vue3模板编译器@vue/compiler-sfc、Vue3版本vue-loader@16+；
• 替换websocket插件为Vue3兼容的@vueuse/websocket。

修改后的核心依赖片段：

"dependencies": {
  "axios": "^1.4.0",
  "core-js": "^3.30.2",
  "vue": "^3.3.4",
  "vue-router": "^4.2.2",
  "vue-scrollto": "^2.20.0",
  "@vueuse/websocket": "^9.13.0"
},
"devDependencies": {
  "@babel/core": "^7.22.1",
  "@babel/eslint-parser": "^7.21.8",
  "@babel/preset-env": "^7.22.4",
  "@vue/cli-plugin-babel": "~5.0.0",
  "@vue/cli-plugin-eslint": "~5.0.0",
  "@vue/cli-service": "~5.0.0",
  "@vue/compiler-sfc": "^3.3.4",
  "babel-loader": "^9.1.2",
  "concurrently": "^8.1.0",
  "css-loader": "^6.8.1",
  "eslint": "^7.32.0",
  "eslint-plugin-vue": "^8.7.1",
  "file-loader": "^6.2.0",
  "sass": "^1.63.2",
  "sass-loader": "^10.4.1",
  "style-loader": "^3.3.3",
  "vue-cli-plugin-vuetify": "~2.5.8",
  "vue-loader": "^16.8.3",
  "webpack": "^5.86.0",
  "webpack-bundle-tracker": "^1.8.1",
  "webpack-cli": "^5.1.4",
  "webpack-dev-server": "^4.15.0"
}

步骤2：清理旧依赖并重新安装 #

rm -rf node_modules package-lock.json
npm install

步骤3：适配Vue3修改webpack.config.js #

• 更新vue-loader配置，移除Vue2专属的esModule: false；
• 修正Vue别名路径为Vue3的ESM构建文件；
• 替换vue-style-loader为标准style-loader。

修改后的配置文件：

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  mode: 'development',
  context: __dirname,
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../static/js'),
    publicPath: '/static/js/',
    filename: 'chat.js',
  },
  plugins: [
    new VueLoaderPlugin(),
    new BundleTracker({ filename: '../vue-chat-app-two/webpack-stats.json' }),
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm-bundler.js',
    },
    extensions: ['.*','.js','.vue','.json']
  },
};

步骤4：修复代码中的插件调用 #

• 替换vue-native-websocket为@vueuse/websocket的Vue3用法：

// 删除原Vue2写法
// import VueNativeSock from 'vue-native-websocket'
// Vue.use(VueNativeSock, 'ws://localhost:8000/ws/chat/', { ... })

// 改用Vue3写法
import { useWebSocket } from '@vueuse/websocket'

const { data, send, open, close } = useWebSocket('ws://localhost:8000/ws/chat/', {
  autoReconnect: true,
})

• 确保Vue3的实例初始化符合规范：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

验证修复 #

执行以下命令确认问题解决：

npx webpack --config webpack.config.js
npm run dev

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