身为一个后端工程师,被一个前端问题折磨的死去活来,久久不能找到原因。定位问题怎么少得了日志,找前端加日志是可以的,奈何是供应商团队的前端啊,再说他搞半天也没找到问题,算了自己来加吧,心中默念我不入地狱谁入地狱,阿弥陀佛...

         前端项目是用vue开发的,通过nodejs webpack打包。我在出问题的js方法里面加了些日志,把前前后后执行的过程、参数数据一一打印出来。改完了,奈何打包成了我遇到的第一个坎坎,毕竟没玩过nodejs,踩了一些坑的,从一个新手的角度记录我部署nodejs最终打出包的过程。

我们的vue项目结构:

vue-project\
             index.html
             package.json
             vue.config.js
             build\
             config\
             src\
             static\
             dist\

1、安装nodejs,我觉得Linux环境好点。我开始安装了windows版本的nodejs,打包的时候报了一堆错,一会说没装python,一会又说没有c++环境要我去下visual studio,碰打鬼,windows难搞干脆在linux虚拟机上来弄,装东西用yum那是很方便的呀。

2、下载nodejs,到底选什么版本的nodejs呢?一开始用最新版本的nodejs也报错,升级就是这样的,说是向下兼容,难免有些时候不管低版本死活,报错原地杵瞎搞半天。我们这项目是2020年开始的,我灵机一动选了一个跟这时间差不多发布的版本:10.18.1,选了个免编译直接使用版本。

下载:

cd /root

wget https://nodejs.org/dist/v10.18.1/node-v10.18.1-linux-x64.tar.gz

解压:

tar -zxvf node-v10.18.1-linux-x64.tar.gz

环境变量配置:

vi ~/.bash_profile

以下这段粘贴到.bash_profile,记得修改路径

#set for nodejs
export NODE_HOME=/root/node-v10.18.1-linux-x64
export PATH=$NODE_HOME/bin:$PATH

加载环境变量配置:

source ~/.bash_profile

安装cnpm:

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

3、下载python3,nodejsv10.18.1需要python3.6.0以上的版本

查看是否安装python3:

python3 -V

如果已安装并且版本符合,就此打住吧,下面不用执行

安装python3:

yum install python36

4、安装c++,这是遇到报错了百度之后这样解决了

yum -y install gcc+ gcc-c++

5、打包vue项目,先把项目上传到linux某个路径

进入项目文件夹(package.json所在文件夹):

cd vue-project

安装依赖,依赖下载到这目录(node_modules):

cnpm install

删除之前的打包:

rm dist/*

打包:

cnpm run build

压缩,在dist目录下有个index.html和static目录

cd dist

tar -cvf dist.tar index.html static/

我们这个项目打出来全是静态资源html、js、css,最终通过nginx部署,直接把dist.tar上传到nginx上面解压就更新了,前提是你要会玩nginx。


如果遇到这个错:Node Sass version 7.0.1 is incompatible with ^4.0.0,我这样解决了。

安装指定4.14.1版本node-sass依赖:

cnpm install node-sass@4.14.1 --save-dev