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" },    
...
];