毎度毎度エラーが出てそのたびに色々なところをめぐって探すのも大変なので書いときます
laravelフレームワークを使用している時に
Vueを導入しようとしてエラーが出る
んで、調べても何か良く分からない
そんな感じの対応の仕方です
npm run devでコケる cross-envが見つからないと怒られる
$ npm run dev
...
$ sh: 1: cross-env: not found
このエラーの対策はpackage.jsonの設定を書き換える
cross-envと記載されている場所をすべてnode_modules/cross-env/dist/bin/cross-env.jsにすればOK
たとえばこんな感じ
"dev": "npm run development", "development": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "node_modules/cross-env/dist/bin/cross-env.js 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": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm installでコケる
$ npm install...$ npm ERR! path ../@babel/parser/bin/babel-parser.js
こんな感じのエラーが出る場合はこうする
$ npm install --no-bin-links
今度は実行しようとするとこんなエラーが出る
Error: Command failed: yarn add vue-template-compiler --dev --production=false
npm install -g yarnpkg でyarnpkgを入れれば良いのだが
さらに↓こんなエラーが出たりする
npm ERR! path /usr/lib/node_modules
リンクが無いなら入れ込み先を別に作るのが良い
参考:https://qiita.com/NaokiIshimura/items/cc07441939b226e779c6
$ mkdir ~/.npm-global $ npm config set prefix '~/.npm-global' $ echo ' export PATH=~/.npm-global/bin:$PATH' >> ~/.bash_profile $ source ~/.bash_profile
全部まとめると、こんな感じ
・package.jsonの中身のcross-envを書き換えたら以下を実行
$ rm -R node_modules
$ npm install --no-bin-links
$ mkdir ~/.npm-global
$ npm config set prefix '~/.npm-global'
$ echo ' export PATH=~/.npm-global/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
$ npm install -g yarnpkg
$ npm install --save vue-template-compiler
$ npm run dev
追記
もしもバージョンが違うというエラーが発生した場合は
node_modules/vue/dist/vue.runtime.common.dev.js
の中にある
Vue.version =
の項目をエラーメッセージに合わせたバージョンで書き換えておけば、とりあえずエラーが消えます