バックグラウンド
いくつかの Vue コンポーネントを使用して構築された比較的古いプロジェクトがlaravel-mixあり、そのすべてのスクリプトを更新すると考えました。
いくつかの変更を加えた後、このエラーが発生し続けました：
Vue packages version mismatch:
- vue@2.5.13
- vue-template-compiler@2.3.3
この時点で、試してみましたが、同様の問題がnpm update vueありました。npm update vue-template-compiler次に、node_modules を "nuke" し、すべてを再インストールするというアドバイスに従いました。
同様の問題に再び遭遇し、いくつかの変更を加え、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"
}
}