毎度毎度エラーが出てそのたびに色々なところをめぐって探すのも大変なので書いときます

 

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 = 
の項目をエラーメッセージに合わせたバージョンで書き換えておけば、とりあえずエラーが消えます