vue项目怎么搭建到云服务器上【图文教程】

  • 作者： 凯哥Java(公众号：凯哥Java)
  • 经验分享
  • 时间：2020-12-27 16:56
  • 3482人已阅读
工作小总结&小工具类 Redis LoRaWAN&ChirpStack AI编程 AI相关 MQTT Maven mybatis ChatGPT uniapp zookeeper Thymeleaf语法 POI-TL sa-token PowerDesigner16.5 taos数据库 frp echarts Actor模型及Akka thingsboard 大疆无人机对接 CI/CD 教师资格证 小任务 面试其他 职场 淘宝客 支付宝支付 HBuilder X Flink Java集合类 多线程 ES Ribbon eureka Docker java游戏 网络通信 Nacos 芋道管理系统 Solr 分布式相关 Dubbo 数据结构 EasyPOI Drools RocketMQ JS 七天深入MySQL实战营 书籍 kafka spring Java基础 java web 若依(ruoyi) 分布式事务 面试宝典 mysql java8新特性 spring cloud ElasticSearch学习系列 HM_leadnews 即时通讯 并发 思维&学习 VUE 宝塔面板 算法刷题 设计模式 RabbitMQ学习系列教程 P3C规范 JVM学习系列 反射 自定义注解 网络美文 PHP源码 经验分享 资源 git项目 websocket 网赚 数据库读写分离 测试相关 其他随笔 shiro学习系列 fremarker学习系列 学习笔录-spring boot 网络文章 工作小总结
简介 VUE项目怎么部署到云服务器上呢？下面凯哥就图文一步一步教大家怎么部署到阿里云上：一：Linux上安装node.js说明：node版本必须是：v11.0官网地址：https://nodejs.org/dist/v11.0.0/1：直接使用已经编译好的包安装1.1：下载node11.0命令：wgethttps://nodejs.org/dist/v11.0.0/node-v11.0.0-linux-

🔔🔔🔔好消息!好消息!🔔🔔🔔

有需要的朋友👉:联系凯哥 微信号 kaigejava2022

VUE项目怎么部署到云服务器上呢？下面凯哥就图文一步一步教大家怎么部署到阿里云上：

一：Linux上安装node.js

说明：node版本必须是：v11.0

官网地址：https://nodejs.org/dist/v11.0.0/

1：直接使用已经编译好的包安装

1.1：下载node11.0命令：
wget https://nodejs.org/dist/v11.0.0/node-v11.0.0-linux-x64.tar.xz

06f39e6717ec9ac1ae3c2a322bcf425a.png

查看下载的文件：

96c92b7a78f841ef2de654baf5e88dd7.png

1.2：解压命令：

tar xf  node-v11.0.0-linux-x64.tar.xz

5f00bccedea7ea33610c72823c6759f5.png

查看解压的后的文件：

c96c7585234aca41f14b01ddf57d2420.png

1.3：进入解压目录

cd node-v11.0.0-linux-x64/ 

1.4：执行查看node命令，查看版本

./bin/node -v

5897efc8278095014399c0edb541641f.png


可以看到版本好是：v11.0.0

2： 创建软连接

解压文件的bin目录底下包含了node、npm等命令，我们可以使用ln命令来设置软连接

命令：

ln -s /root/node-v11.0.0-linux-x64/bin/npm   /usr/local/bin/

ln -s /root/node-v11.0.0-linux-x64/bin/node   /usr/local/bin/

说明：

/root/node-v11.0.0-linux-x64/bin：这个是凯哥的目录。这个需要切换成自己的目录。切记

验证是是否安装成功。查看命令：node –v 

2351604e7dc49fe7ae4622df713014d2.png

当看到node的版本号，说明已经安装成功了。

二：Windows安装

https://www.runoob.com/nodejs/nodejs-install-setup.html


三：VUE项目打包

1,首先，将vue项目打包（打包文件为dist，里面放着打包好的css，js，index.html文件）,打包前先把IP地址改好（port改了其实没用，访问端口号是看nginx里配置的端口号）！！！

f236569a2572330727eb2114a0344420.png

命令：npm run build 打包

四：项目部署

build打包后，会在目录项目目录下有个【dist】文件夹上传到服务的【根目录】下.(可以压缩上传快)

【将dist文件放到服务器上（我放置在nginx同级目录下）】

五：Nginx配置：

配置nginx conf下的nginx.conf

af9559f76dbee4c2d4a82d10bb8a2694.png

说明：在root中直接指向dist的目录。

5，访问页面咯  http://ip:port即可






工作小总结&小工具类 Redis LoRaWAN&ChirpStack AI编程 AI相关 MQTT Maven mybatis ChatGPT uniapp zookeeper Thymeleaf语法 POI-TL sa-token PowerDesigner16.5 taos数据库 frp echarts Actor模型及Akka thingsboard 大疆无人机对接 CI/CD 教师资格证 小任务 面试其他 职场 淘宝客 支付宝支付 HBuilder X Flink Java集合类 多线程 ES Ribbon eureka Docker java游戏 网络通信 Nacos 芋道管理系统 Solr 分布式相关 Dubbo 数据结构 EasyPOI Drools RocketMQ JS 七天深入MySQL实战营 书籍 kafka spring Java基础 java web 若依(ruoyi) 分布式事务 面试宝典 mysql java8新特性 spring cloud ElasticSearch学习系列 HM_leadnews 即时通讯 并发 思维&学习 VUE 宝塔面板 算法刷题 设计模式 RabbitMQ学习系列教程 P3C规范 JVM学习系列 反射 自定义注解 网络美文 PHP源码 经验分享 资源 git项目 websocket 网赚 数据库读写分离 测试相关 其他随笔 shiro学习系列 fremarker学习系列 学习笔录-spring boot 网络文章 工作小总结

上一篇： uniapp打包成H5部署到服务器教程

下一篇： 为什么不建议在 for 循环里捕捉异常？

TopTop