Vue js – 未定义模板或渲染函数

Question

背景

我有一个使用 laravel-mix 和一些 Vue 组件构建的相对较旧的项目，我想我会更新它的所有脚本。

进行一些更改后，我不断收到此错误：

Vue packages version mismatch:

- vue@2.5.13
- vue-template-compiler@2.3.3

此时，我尝试 npm update vue 和 npm update vue-template-compiler 但遇到了类似的问题。然后我按照一些建议 "nuke" node_modules 重新安装了所有东西。

我再次遇到类似问题并对我的 package.json 进行了一些更改，重新安装了所有内容，现在我的构建脚本运行良好。

问题

在浏览器中 none 正在加载组件。在控制台中，对于页面上的每个组件，我收到以下错误：

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <WorldMap>
       <Root>

我检查了以下...

<world-map> 标记在页面上并且正在加载 WorldMap 组件
该组件在其脚本部分有一个 export default {
我的模板包裹在模板标签中
我从来不需要 render 函数，所以没有，但我已经将其视为一种解决方案
还值得指出的是，我的所有文件在我运行此更新之前都有效，因此它要么是 Vue 版本问题，要么是 npm 版本问题。

我是不是漏掉了一个关键的 vue 模块？我的很多搜索都说安装了运行-time 版本的 vue，但到目前为止，我的设置从来不需要在那里进行任何更改。

我是一个 npm 菜鸟所以欢迎光顾我/解释一下

这是我的package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.17",
    "bootstrap-sass": "^3.3.7",
    "browser-sync": "^2.23.5",
    "browser-sync-webpack-plugin": "^1.2.0",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.5.7"
  },
  "dependencies": {
    "bodymovin": "^4.13.0",
    "jquery-match-height": "^0.7.2",
    "medium-editor": "^5.23.3",
    "numeral": "^2.0.6",
    "rangeslider.js": "^2.3.2",
    "rellax": "^1.5.0",
    "vue-loader": "^13.7.0",
    "vue-sortable": "^0.1.3"
  }
}

Answer 1

我记得也有过这个，其中一个更新中引入了重大更改。

如果您使用 require 来加载您的组件，您需要在末尾添加一个 .default 调用。

这是我的 boot.js

new Vue({
    el: "#app-root",
    store,
    router: router,
    render: h => h(require("./components/app/app.vue").default)
});

这是我的 router.js

const routes = [
    { path: '/', component: require('./components/home/home.vue').default, name : "home" },    
...
];

Vue js – 未定义模板或渲染函数

Vue js – Template or render function not defined

vue.js

vuejs2

laravel-mix

背景

问题