前端打包环境配置步骤

2023-12-13 03:43:24

获取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?vue@2.6.10

安装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/

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

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

文章来源:https://blog.csdn.net/liufangaliya/article/details/134846378
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。