配置NODE开发环境使用vue-cli脚手架搭建VUE—Admin项目

前言：VUE是目前最火的前端框架之一就业薪资很高，此篇文章手把手教您如何快速学会搭建使用VUE框架，对正在工作当中或打算学习VUE高薪就业的你来说，那么这门技术便是你手中的葵花宝典。

一、Linux系统下搭建VUE开发环境

1、下载NOED安装包（手动下载或wegt下载）

手动官网下载并scp上传至linux服务器

下载SCPwin工具即可进行上传或者最原始的rz sz命令具体操作如下
yum install -y lrzsz
rz 文件 服务器指定的目录路径

wegt下载安装（需要注意是否已安装wegt工具没有yum安装一下）

wget https://nodejs.org/download/release/v6.12.3/node-v6.12.3-linux-x64.tar.gz 

2、解压（比如我要解压至/usr/local/node-v6）

tar -xzvf node-v6.12.3-linux-x64.tar.gz -C  /usr/local/node-v6
也可以分布解压并移动
tar -xzvf node-v6.12.3-linux-x64.tar.gz 
mv node-v6.12.3-linux-x64/ /usr/local/node-v6

3、配置环境变量

vi 或wim /etc/profile
export NODEJS_HOME=/usr/local/node-v6
export PATH=${PATH}:${NODEJS_HOME}/bin
需要刷新配置source /etc/profile

4、建立软连接

ln -s /usr/local/node-v6/bin/node /usr/local/bin/node
ln -s /usr/local/node-v6/bin/npm /usr/local/bin/npm
ln -s /usr/local/node-v6/bin/npx /usr/local/bin/npx
没有权限的sudo一下

5、检测node环境是否安装成功（输出版本号即正确）

[[e-mail] ~]# node --version  注意俩-
v10.6.0

二、安装项目环境及脚手架（为了加速安装使用淘宝镜像）

1、安装安装webpackage，它可以做到动态的把后端的代码变成浏览器能够读懂的代码。

npm install webpack -g --registry=https://registry.npm.taobao.org

2、安装cnpm（部分npm安装不了的它可以去github下载安装，之后run项目会有坑避免踩）

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装vue-cli脚手架（Cnpm安装及官方版本安装任选其一）

cnpm install -g vue-cli

根据官方文档，执行指令：（建议安装前，将安装依赖源改为淘宝的依赖源：执行

sudo npm config set registry https://registry.npm.taobao.org //设置淘宝镜像

source ~/.bashrc    // 使依赖源立即生效

npm install -g @vue/cli

安装完成之后，可以发现/usr/local/node-v6/bin/目录下会多出一个vue文件，将这个文件链接到/usr/local/bin目录就可以了

sudo ln -s /usr/local/node-v6/bin/vue /usr/local/bin/vue

接下来就可以通过vue指令创建vue项目了

vue create vue_project;

4、安装Git

[[e-mail] ~]# yum -y install git （等待安装完成）
[[e-mail] ~]# git --version （检查是否安装成功）
git version 1.8.3.1 （输出版本号则正常）

三、下载官方VUE-Admin官方模板及安装部署

1、克隆或下载上传解压

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 或自行下载解压至目录这里我建议根目录创建一个文件夹再创建个组用户为了安全
下载上传好了之后tar -xzvf解压对应的文件夹

2、进入项目目录

# 进入项目目录（比如当前目录为/wwww/yuyanqing.cn/vue-admin）
[[e-mail] VUE-Admin]# cd /www/yuyanqing.cn/VUE-Admin

采坑时刻开始（普通安装及加速安装）

强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。若还是不行，可使用 yarn 替代 npm。

Windows 用户若安装不成功，很大概率是node-sass安装失败，解决方案会在下面批注。

另外因为 node-sass 是依赖 python环境的，如果你之前没有安装和配置过的话，需要自行查看一下相关安装教程。

# 安装依赖
npm install
采用加速镜像安装
npm install --registry=https://registry.npm.taobao.org

相信执行完上面步骤后看到ERR日志一脸懵逼的你还在百度（这里是因为MAC开发环境差异不需要理会）

gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/www/yuyanqing.cn/VUE-Admin/node_modules/node-sass/.node-gyp'
gyp ERR! System Linux 3.10.0-514.26.2.el7.x86_64
gyp ERR! command "/usr/local/Node-v10.6.0/bin/node" "/www/yuyanqing.cn/VUE-Admin/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /www/yuyanqing.cn/VUE-Admin/node_modules/node-sass
gyp ERR! node -v v10.6.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed with error code: 1

完美避开踩坑二（当你看到以下错误时不要惊慌继续跟我走）

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [e-mail] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [e-mail] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-03-09T03_07_17_919Z-debug.log
[[e-mail] VUE-Admin]# 

看到这里很明显缺少这个[e-mail] postinstall script.

解决办法一：（如果成功那么恭喜，我这里没有成功）

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
npm install

解决办法二：（采用npm安装改插件，虽然官方不建议使用但是报错咋的解决对吧，这里亲测OK）

[[e-mail] VUE-Admin]# cnpm install --registry=https://registry.npm.taobao.org
# 输出以下信息时则成功
✔ Installed 56 packages
✔ Linked 167 latest versions
[1/1] scripts.install [e-mail]^4.9.0 run "node scripts/install.js", root: "/www/yuyanqing.cn/VUE-Admin/node_modules/[e-mail]@node-sass"
Cached binary found at /root/.npminstall_tarball/node-sass/4.13.1/linux-x64-64_binding.node
[1/1] scripts.install [e-mail]^4.9.0 finished in 377ms
[1/1] scripts.postinstall [e-mail]^4.9.0 run "node scripts/build.js", root: "/www/yuyanqing.cn/VUE-Admin/node_modules/[e-mail]@node-sass"
Binary found at /www/yuyanqing.cn/VUE-Admin/node_modules/[e-mail]@node-sass/vendor/linux-x64-64/binding.node
Testing binary
Binary is fine
[1/1] scripts.postinstall [e-mail]^4.9.0 finished in 298ms
✔ Run 1 scripts
✔ All packages installed (178 packages installed from npm registry, used 3s(network 3s), speed 116.68kB/s, json 169(322.15kB), tarball 0B)

3、本地开发 启动项目（我相信很多小伙伴会先使用以下命令那么恭喜又踩坑了，好奇心害死猫）

npm run dev

DONE  Compiled successfully in 44818ms                                                                            11:16:10 AM
                                                                                                                              
  App running at:
  - Local:   http://localhost:9527/ 
  - Network: http://172.19.193.105:9527/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

很奇怪的是为什么这里successfully成功了呢，但我为什么说踩坑继续走下去，浏览器输入域名：端口号你就会发现特别之处，当然这里不知道搭建阿里云服务器的看我另外一篇博客

vue-cli搭建的环境，用nginx做代理服务器，访问时显示：Invalid Host heade

看到这傻了眼吧，经查是因为新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的就不能访问。这样有2中方法，一种是设置跳过host检查，一种是直接host设置成你的地址

解决办法一：

cd /项目根目录/
vi或vim vue.config.js
添加
disableHostCheck:true, （注意不是=）
：wq保存一下
再次启动 npm run dev

再次使用npm run dev（如果没有报错则OK可以正常访问）请跳过以下错误解决办法继续往下走

可能又有人喜欢用=号替代报错如下，这里也是我自己犯的一个小错误

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [e-mail] dev: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [e-mail] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-03-09T03_25_54_990Z-debug.log

解决办法：

ERROR  Error loading vue.config.js:
ERROR  SyntaxError: Invalid shorthand property initializer
[e-mail] dev: `vue-cli-service serve
原因:  vue.config.js data中的一个属性冒号写成了"="号
解决方法:  
vi vue.config.js
等号改成冒号
只要删掉该项目中的  node_modules 文件夹，然后重新进入到该项目，是用命令加载 cnpm install 加载一下，等待加载完成后，使用命令 npm run dev 即可，或者点击运行按钮也可以正常使用

最后再次访问域名:端口号正常访问成功即可

vue 配置发布测试环境，成产环境api

vue通过配置不同命令自动发布到测试环境或者成产环境

cnpm run build 配置开发环境

cnpm run build:test  打包到测试环境

cnpm run build:prod 打包到成产环境

vue 在vue-cli脚手架会生成build config两个文件夹

在build文件夹下新建webpack.test.conf.js 将webpack.prod.conf.js内容复制过来

将webpack.test.conf.js 修改成 const env = require('../config/test.env')

又有小伙伴会问为什么网页加载这么慢，下期讲解项目部署nginx及路由懒加载、CDN、Gzip加速