【Vue.js】vue createがコケまくる時の対処法

はじめに

Vue CLIに2系と3系があることを最近知り、自分の環境に入っていたのが2系だったので、3系を再インストールしました。
3系で改めてVue.jsのプロジェクトを作ってみようとしたら、エラーが出て一向にプロジェクトが作れない事象が発生しました。
その時の対処法を記しておきます。

環境

• macOS 10.13.5
• Node.js v9.4.0
• Vue CLI v3.0.0-rc.4

事象

$ vue create testproject


Vue CLI v3.0.0-rc.4
? Please pick a preset: default (babel, eslint)


Vue CLI v3.0.0-rc.4
⠋  Creating project in /Users/saken649/Documents/Projects/testproject/testproject.hasProjectGit /Users/saken649/Documents/Projects/testproject/testproject false
✨  Creating project in /Users/saken649/Documents/Projects/testproject/testproject.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

npm ERR! Unexpected end of JSON input while parsing near '...1.4.0.tgz"},"engines"'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/saken649/.npm/_logs/2018-07-15T08_21_44_120Z-debug.log
 ERROR  command failed: npm install --loglevel error --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist

https://npm.taobao.org/dist から npm install する時にエラーが出ている。
ということはバグっぽい気がしています。

対処法

リポジトリから取れないとなるとどうしよう。。。と思って調べてみたら、既に公式Issueで対策が上がっていました。
https://github.com/vuejs/vue-cli/issues/889#issuecomment-397225829

I am using "vue-cli 3.0.0-rc.1", I solve the problems by setting the ~/.vuerc from "useTaobaoRegistry": true, to false.

ということでやってみます。

$ vi ~/.vuerc

ばっちり記述を発見。

{
  "useTaobaoRegistry": true
}

true なので false に書き換えて保存。

{
  "useTaobaoRegistry": false
}

改めて vue create してみましょう。

$ vue create testproject


Vue CLI v3.0.0-rc.4
? Please pick a preset: default (babel, eslint)


Vue CLI v3.0.0-rc.4
⠋  Creating project in /Users/saken649/Documents/Projects/testproject/testproject.hasProjectGit /Users/saken649/Documents/Projects/testproject/testproject false
✨  Creating project in /Users/saken649/Documents/Projects/testproject/testproject.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...


> fsevents@1.2.4 install /Users/saken649/Documents/Projects/testproject/testproject/node_modules/fsevents
> node install

[fsevents] Success: "/Users/saken649/Documents/Projects/testproject/testproject/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote

> yorkie@1.0.3 install /Users/saken649/Documents/Projects/testproject/testproject/node_modules/yorkie
> node bin/install.js

setting up Git hooks
done

added 1307 packages from 766 contributors and audited 12135 packages in 43.584s
found 0 vulnerabilities


🚀  Invoking generators...
📦  Installing additional dependencies...

added 1 package from 1 contributor and audited 12139 packages in 9.112s
found 0 vulnerabilities


⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project testproject.
👉  Get started with the following commands:

 $ cd testproject
 $ npm run serve

大丈夫そうですね。

ついでに、ローカルサーバーの立ち上げ方も、 npm run dev ではなく npm run serve に変わってたんですね。
アップデートしてみて初めて知った。。

終わりに

今回原因になってた https://npm.taobao.org/ ですが、どうやらnpmのミラーらしいです。
確かにアクセス出来なかったので、タイミング悪く落ちていたのかなんなのか。。。
今のところ、taobaoを切って困ってはいないので、この設定にしておいて良さそうです。