部署vue项目到Linux服务器
阅读原文时间:2021年11月28日阅读:1
  • vue-cli构建vue3项目,将项目上传到Linux服务器,服务器安装node,并启动vue项目

  • 首先本地有一个vue项目,启动后可正常访问

  • 本地打包后,也可直接访问

  • 若打包后的index.html页面显示空白,需在项目的根路径下新建vue.config.js,再重新打包,参考

  • Linux服务器安装nodejs,参考

    下载node压缩包,在哪条路径下执行该命令,就会下载到哪条路径下

    wget https://npm.taobao.org/mirrors/node/v12.16.1/node-v12.16.1-linux-x64.tar.gz

    将压缩包剪切到/usr/local/bin/路径下,并解压

    tar -xvf node-v12.16.1-linux-x64.tar.gz

    修改文件夹名称为NodeJs

    mv node-v12.16.1-linux-x64 NodeJs

    安装gcc

    yum install gcc gcc-c++

    在/usr/local/bin/NodeJs/bin路径下有三个文件:node npm npx

    为这三个文件设置软连接,/usr/bin目录用于存放系统命令,此时在任意路径下执行:node 相当于是执行/usr/local/bin/NodeJs/bin/node路径下的文件,执行node后会进入node环境

    ln -s /usr/local/bin/NodeJs/bin/node /usr/bin/node
    ln -s /usr/local/bin/NodeJs/bin/npm /usr/bin/npm
    ln -s /usr/local/bin/NodeJs/bin/npx /usr/bin/npx

    进入根目录

    cd

    验证

    node

  • 将vue项目上传到Linux服务器,编译运行

    进入vue项目的根目录

    cd /home/web

    安装依赖

    npm install

    编译打包

    npm run build

    启动项目

    npm run serve

  • 测试

错误总结

  • 在Linux服务器上编译项目时报错如下,说明node版本过低,参考

  • 在Linux服务器上编译项目时报错如下,说明node版本17.1.0过高

  • 解决方案,参考

    若之前使用yum安装的node,需卸载后重新安装,安装步骤参考本篇博客中使用源码包的方法安装

    卸载nodejs

    yum remove nodejs npm -y

    进入 /usr/local/lib 删除所有 node 和 node_modules文件夹

    进入 /usr/local/include 删除所有 node 和 node_modules 文件夹

    进入 /usr/local/bin 删除 node 的可执行文件

  • 若编译、启动项目时报错权限不足

  • 解决方案

    将指定文件设置权限

    chmod 777 /home/web/xxx

  • 运行项目时报错:warnings potentially fixable with the --fix option

  • 解决方案,将项目中package.json中"lint": "vue-cli-service lint" 修改为:eslint --fix --ext .js,.vue src

  • 参考