前端打包环境配置步骤

获取node安装包并解压

• 获取node安装包

  wget https://npmmirror.com/mirrors/node/v16.14.0/node-v16.14.0-linux-x64.tar.xz

• 解压

  tar -xvf node-v16.14.0-linux-x64.tar.xz

  创建软链接

• sudo ln -s 此文件夹的绝对路径/bin/node /usr/local/bin/node，具体执行如下：

  sudo ln -s ~/npm/node-v16.14.0-linux-x64/bin/node /usr/local/bin/node

  
  验证是否正常

  node -v

• sudo ln -s 此文件夹的绝对路径/bin/npm /usr/local/bin/npm

  sudo ln -s ~/npm/node-v16.14.0-linux-x64/bin/npm /usr/local/bin/npm

  
  验证是否正常

  npm -v

  

将npm换为cnpm,淘宝本地源，并创建软链接(时间较长)

• 将npm换为cnpm 执行命令：

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

  

• 创建软链接：
  sudo ln -s 此文件夹的绝对路径/bin/cnpm /usr/local/bin/cnpm 详情如下：

  sudo ln -s ~/npm/node-v16.14.0-linux-x64/bin/cnpm /usr/local/bin/cnpm

安装vue

• 执行命令安装VUE 

  cnpm install [email protected]

  

安装yarn

• 添加GPG key

  curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add

  
  

• 添加源

  echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

• 执行安装命令

  sudo apt update && sudo apt install --no-install-recommends yarn

  
  

• 运行

  yarn -v

  测试是否成功

(若yarn不成功) 配置环境变量，若成功跳过此步

• 打开环境变量文件

  vi ~/.bashrc

• 最后一行添加

  export PATH="$PATH:`yarn global bin`"
  source ~/.bashrc

进入前端项目打包

备注说明：如果首次操作需要先将前端项目下载到服务器指定路径，例如：/home/narada/ems_frontend

• 进入前端目录 

  cd ems_frontend/

• 执行

  yarn

  

• 执行打包命令

  cnpm run build:prod 

  或

   yarn run build:prod

  

打包成功，拷贝目录

打包成功后，将此目录下的dist文件夹拷贝到ems/www中，若无www文件夹则先新建www文件夹后拷贝

cp -rf dist /home/narada/ems/www/

确认打包的前端内容正常打包到对应的目录下如图：

访问测试环境地址验证是否成功，如果能正常访问即打包成功~