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

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

---

问题描述

如上, 在 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"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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: "",
  components: {
    Cpn
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

---

原因分析

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

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

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

---

解决方案

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

1. 我换回了vue-laoder@15.4.2的版本,
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()
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

运行结果

再次执行 npm run build 就没啥问题了

这是我运行的html效果图, 可以看到和Cpn.vue文件的内容是一样的