vue-loader 构建结果报错：TypeError: vue.openBlock is not a function

问题描述

当时用单文件组件的格式编写Vue组件时，需要 vue-loader 的参与。

rules: [
    {
        test: /\.vue$/,
        loader: 'vue-loader'
    },
    // 它会应用到普通的 `.js` 文件
    // 以及 `.vue` 文件中的 `<script>` 块
    {
        test: /\.js$/,
        loader: 'babel-loader'
    },
]

构建结果正常看不出来问题但页面打开报错 TypeError: vue.openBlock is not a function。

解决方案

默认安装webpack 和 vue-loader 的 版本分别是"webpack": "^5.50.0","vue-loader": "^16.5.0",而 Vue 的版本是 "vue": "^2.6.14"，推测是版本不兼容导致。

看了下vue-loader仓库的release信息，验证了想法：

所以将webpack和vue-loader回退即可。

"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"vue-loader": "^15.9.6",