如题
前几天在搭建新的项目的时候,脚手架升级到了 vue-cli4.x 的版本,然后像往常一样创建了新的项目。可是在安装依赖的过程中,
node-sass
需要在 github 上下载一个依赖包。一直没安装成功,后来改用了 cnpm (淘宝的镜像)去安装全部依赖。依赖是装上了,可是引发了下面的很多问题
vscode 对于 vue 文件无法进行智能提示
没有智能提示那简直比白板面试还要难受,甚至乱写代码也不会有错误警告。这和用记事本写代码没什么区别,这绝对不能忍!
于是各种找教程,解决没有智能提示的问题,可是我其他的 vue 项目都是正常,唯独这个不行。
最后发现,在我使用 npm install
命令之前,vue 智能提示还是好的,就是 cnpm install
后他就不行了!而且可能由于脚手架是最新的 4.x 版本,用 cnpm 安装的依赖包在运行的时候脚手架总是报错
几经折腾和测试,发现就是因为
cnpm
和vue-cli4.x
的问题。有可能脚手架刚更新,cnpm 没跟上把。所以必须要用 npm 来安装各种包才行
用 npm 无法下载 node-sass/phantomjs
没有 sass
的前端项目是不完整的!最后在 github 的 issues 中发现很多人都和我一样无法安装 node-sass github - 安装 node-sass 的正确姿势
最后在这个 issues 找到各路大神的答案。自己也总结一下:
1、新建一个 .npmrc 文件
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org
这样使用 npm install 安装 node-sass
、electron
和 phantomjs
时都能自动从淘宝源上下载,但是在使用 npm publish 的时候要把 registry 这一行给注释掉,否则就会发布到淘宝源上去了。
2、每次安装都单独 set 一下 cnpm
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
npm install
更多的我就没仔细统计了。我就采用了第一种方法,多一个文件,一劳永逸!
最后
最后用 npm 安装的依赖没问题,node-sass 通过 cnpm 也下载下载可以使用,vscode 也能正常的使用提示和定义的代码模版,美滋滋~