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，但遇到了类似的问题。然后，我接受了一些建议，以及＃34; nuke＆＃34; 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 noob，所以随时光顾我/解释

这是我的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 - 未定义模板或渲染功能

背景

问题

1 个答案: