mac创建vue脚手架项目遇到Syntax Error: Error: EACCES: permission denied, mkdir ...问题及解决方案

项目场景：

新的未安装环境的mac本使用vue-cli创建vue项目时遇到一点问题，现做个记录。

---

问题记录

1. 安装：安装node，安装webpack，安装vue-cli。npm install webpack -g，执行时看起来没有问题，但是使用命令时会报错permission denied ，是因为没有权限。需要使用sudo + 你的命令，然后输入电脑的账户密码，此时再执行命令就不会有问题。
2. 脚手架区分：
   安装 vue-cli 2.x：sudo npm install vue-cli -g
   安装 vue-cli 3.x+：sudo npm install -g @vue/cli
3. 新建项目：
   vue-cli 2.x：sudo vue init webpack demo
   vue-cli 3.x：sudo vue create demo
4. 剩下安装过程按需选择即可
5. 启动项目默认命令：
   vue-cli 2.x：npm run dev
   vue-cli 3.x：npm run serve
6. 使用vue-cli2.x 时没发现，但是使用vue-cli最新版安装完成后会发现，使用npm run serve 启动报错：Syntax Error: Error: EACCES: permission denied, mkdir ...，并且npm install 一些依赖时都会有相似的报错，其实都是因为一开始的权限问题。搜一些解决办法，有很多，类似于每行命令加sudo ，给编辑器开放全部访问权限，修改环境变量配置等，这里不细说。
7. 我发现从远端down下来的文件无论是install或者启动都不会有任何问题。那，我们是不是只需要复制全部文件内容（node_modules除外，这个文件夹有点大，网络允许的话重新install即可），粘贴到另一个空的文件夹即可，这时候会发现无论是install或者其他命令都不会有任何问题。

原因分析

1. macos是基于Linux的，本身sudo就是Linux下的指令，sudo命令以系统管理者root的身份执行指令，不带sudo是以普通用户的身份执行指令。root一般情况下可以访问普通用户创建的内容但是普通用户一般没有root用户创建的内容的读写权限。
2. 普通用户对 使用root用户创建的项目没有读写权限。

解决办法

1. 针对原因1 ：

• 每行命令加sudo，相当于普通用户拿了root用户的权限执行这条指令。当然为了方便也可以直接切换到root用户去执行。
• 给编辑器开放全部权限，相当于打开编辑器默认他是root权限级别（root权限能干的事儿还是挺多的，不轻易这么操作）。
• 修改环境变量配置是给webpack增加一个路径，让普通用户也能访问到这个权限，目前看这个最靠谱，既一劳永逸解决了权限问题，又不会给编辑器更多的权限。

2. 针对原因2 ：
   既然他是只读，那就让他不是只读。我们收到一个只读的文档是不是修改完后另存为就可以任意修改保存了？同理，将我们新建的demo直接复制一份出来放到另一个由普通用户创建的文件夹那不是他就能任意修改了嘛，所以，如果像我一样是个linux小白，可以取这个捷径去试一试~