部署vue项目到Linux服务器

• 2021 年 11 月 28 日
• 筆記
• linux, vue.js, 服务器

案例一

• vue-cli构建vue3项目，将项目上传到Linux服务器，服务器安装node，并启动vue项目

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

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

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

• Linux服务器安装nodejs，参考

# 下载node压缩包，在哪条路径下执行该命令，就会下载到哪条路径下
  wget //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
  
• 参考