部署 Vue 项目到云服务器(图示)

  1. 安装 node 环境

curl --silent --location https://rpm.nodesource.com/setup_12.x | sudo bash -sudo yum install -y nodejs

部署 Vue 项目到云服务器(图示)_第1张图片
部署 Vue 项目到云服务器(图示)_第2张图片

  1. 检测是否安装完成

node-v
部署 Vue 项目到云服务器(图示)_第3张图片

  1. 打包你的项目

npm run build

部署 Vue 项目到云服务器(图示)_第4张图片
部署 Vue 项目到云服务器(图示)_第5张图片

  1. 检验压缩的代码后的代码是否有问题
  • 本地测试生产环境(css有时打包后有出错)
    • npm i serve -g 下载测试代码的本地环境
      在这里插入图片描述
    • serve -s dist -l 81 运行该项目, 81是端口
      部署 Vue 项目到云服务器(图示)_第6张图片
  1. 把dist目录下的所有文件复制到express项目的public文件夹下

部署 Vue 项目到云服务器(图示)_第7张图片
部署 Vue 项目到云服务器(图示)_第8张图片

  1. 上传与安装
  • 整合好的node 拖到 finalShell 下面(不拽node_modules) -------- finalShell 工具使用

部署 Vue 项目到云服务器(图示)_第9张图片

  1. 安装 node_modules
  • cd xxx(文件名) 进入到项目目录
  • npm i 下载依赖文件
    在这里插入图片描述
  • npm start 运行项目(因为我没全部使用 express 框架,所以可能有点不一样)
    部署 Vue 项目到云服务器(图示)_第10张图片
  1. 访问网站
  • 如果访问不了 ------ 配置安全组(阿里云)
  • 在浏览器内输入你的 ip(域名)
    • 如果是 ip 的话要输入端口号
      部署 Vue 项目到云服务器(图示)_第11张图片

注意

  • 关闭finalShell ,云服务就断了,网页无法访问 --------- 解决方法

你可能感兴趣的:(服务器,阿里云,vue部署,云服务器)