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，但也有类似的问题。然后，我按照一些建议“核弹”node_modules，并再次安装所有的东西。

我再次遇到类似的问题，对我的package.json做了一些修改，重新安装了所有的东西，现在我的构建脚本工作得很好。

问题

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

[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模块吗？我的很多搜索都提到安装了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" },    
...
];