TypeError: Cannot read properties of undefined (reading ‘vue‘)-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52000150/article/details/127568572

文章目录

如果你急着找解决方案, 可以直接跳到 解决方案 , 但我们的出错原因也许不一样

问题描述

如上, 在 npm run build 的时候, 出现了

TypeError: Cannot read properties of undefined (reading ‘vue’)

问题场景

以下是我的一些相关文件

package.json

{
	...
	
  "devDependencies": {
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "dependencies": {
    "vue": "^2.5.21"
  }
}

main.js main.js中引用Cpn.vue

// 使用vue进行开发
import Vue from "vue";

//导入Cpn组件
import Cpn from "./vue/Cpn.vue"
const app = new Vue({
  el: "#app",
  template: "<Cpn/>",
  components: {
    Cpn
  }
})

Cpn.vue 该vue组件被main.js引用

<template>
  <div>
    <h2 class="title">组件标题</h2>
    <blockquote>{{ message }}</blockquote>
    <p>组件内容, 哈哈哈哈哈哈</p>
  </div>
</template>

<script>
export default {
  name: "Cpn",
  data() {
    return {
      message: "Blockquote : hello, this is a message from Cpn component"
    }
  }
}
</script>

<style scoped>
.title {
  color: #002FA7;
}
</style>

原因分析

我原来用的是vue-loader@15.x.x版本, 但是打包的时候会报一个没有什么插件的错误, 所以根据网上的解决方案换到14以下的版本.

然后就是上面图片里的报错, 而且我是找不到解决方案的, 鉴于这样的情况

我不妨就换回vue-loader@15.x.x的版本, 然后把那个什么插件给安上去会怎么样呢

解决方案

思路: 我们就使用vue-loader@15.x.x的版本, 然后配个插件试试

我换回了vue-laoder@15.4.2的版本,
然后按网上说的配一下插件, 步骤如下
到webpack.config.js中添加代码如下 const {VueLoaderPlugin} = require('vue-loader')

然后还是在本文件内的module.exports内配置属性plugins, 如下

webpack.config.js 文件内两条注释标的地方就是需要配置的地方

// 解决vue-loader需要插件的问题
const {VueLoaderPlugin} = require('vue-loader')

module.exports = {
  ...
  module: {
    rules: [
	  ...
      {
        test: /\.vue$/,
        use: [
          "vue-loader"
        ]
      },
    ]
  },
  ...
  // 解决vue-loader需要插件的问题
  plugins: [
    new VueLoaderPlugin()
  ]
}