前言

作为前端开发人员，我们不仅要会写代码，优化打包，上线部署也是一个前端工程师必备的技能，这篇文章就教大家从零开始，把一个完整项目打包发布到线上服务器。首先的准备工作就是需要一台云服务器。

项目打包优化

项目的打包

对于项目打包，直接在项目目录输入指令 npm run build
就可以看见项目目录生成了一个名为dist的文件，就是是打包后的文件，将这个文件进行部署就可以

项目的优化

我们可以利用vue项目管理器查看我们项目可以优化的地方
在cmd中输入vue ui打开项目管理器，打开我们需要打包的项目
任务 -》build -》运行

等待编译打包成功，目录也会跟上面方法一样出现dist文件
点击分析，就可以查看项目编译相关的信息，从而进行优化。例如我这里element-ui是全部引入，所以内存占比比较到，可以改为部分引入，缩小打包体积，提高运行效率

项目上线部署

上面有两种方法把项目进行打包，得出dist文件夹，下面我们就需要把这个文件夹发布发到服务器上去，对于部署我这里选择采用nginx进行代理

首先要在服务器上安装nginx，nginx的安装和使用看我这篇文章（下方链接）
服务器安装nginx详细步骤

从这里开始，我默认大家已经安装好了nginx。这里我用了两款连接服务器的工具，xshell和Xftp，使用比较简单这里就不叙述了

上传项目到服务器

使用Xftp连接服务器，然后把我们打包好的dist文件丢到服务器文件夹中去

配置nginx

下面我们进入服务器中nginx/conf中的nginx.conf，也就是它的配置文件，进行配置，编辑文件
找到http中server的内容进行编写：

listen后填监听的端口号，记得放行该端口
server_name后填服务器的公网地址
location里面root后面填你dist文件存放的位置

server {listen       3434;server_name  1.xxx.56.xxx;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root   /root/Student_vue/dist;index  index.html index.htm;}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}

改完之后保存，退回到nginx/sbin目录中，输入命令 ./nginx 运行nginx
然后浏览器访问上面配置的地址 1.xxx.56.xxx:3434

发现可以进入登录页面，但是点击登录的时候报错
别慌，再次进入到nginx.conf配置文件中，配置接口的代理还有路由
loaction / 中增加一行代码，下面增加location /api/ 配置接口代理

location / {root   /root/Student_vue/dist;index  index.html index.htm;try_files $uri $uri/ /index.html;}
location /api/ {proxy_pass http://1.xxx.xx.64:5004/api2/;
}

保存文件，进入nginx/sbin目录，输入指令 ./nginx -s reload 重启nginx服务，访问地址，完全ok

最后

所有步骤实测可行，如果在部署过程中遇到问题可以下方留言讨论~

Vue项目从打包优化到上线部署云服务器的全过程（教你在云服务器上优化部署自己的项目）相关推荐

教你在CentOS 8上安装和配置Redmine项目管理系统
Redmine Redmine是一个免费开源的项目管理和问题跟踪应用程序,它是跨平台和跨数据库的,建立在Ruby on Rails框架之上.文内含长段代码可复制可往左滑,希望对大家有帮助! 实验环境 ...
bpmn 文件服务器部署,Liferay7 BPM门户开发之45: 集成Activiti文件上传部署流程BPMN模型...
开发文件上传,部署流程模板. 首先,开发jsp页面,deploy.jsp ${RETURN_MESSAGE} 其中,上传form的action为portlet:actionURL,它的name就是在p ...
教你如何在宝塔上快速部署优客365网址导航
程序版本: 优客365网址导航开源版1.4.8 前言宝塔面板目前是国内最好用的网站管理工具,目前占用率排名第一.宝塔一键部署网站非常适合新手站长.它可以快速帮你搭建好一个cms系统,无需安装配置等. ...
vue3 项目修改打包后的引用路径，调整图片压缩成base64的门槛
vue3 项目修改打包后的引用路径,调整图片压缩成base64的门槛前言解决完事前言最近的项目中需要在程序中显示一个H5页面,所以按照官方VUE CLI的教程创建了一个项目开始整.整到最后打 ...
Ubuntu16.04多主机集群上手动部署Kubernetes，配置docker私有registry，配置Kubernetes-dashboard WEB ui
Ubuntu16.04多主机集群上手动部署Kubernetes,配置docker私有registry,配置Kubernetes-dashboard WEB ui 2017年03月17日 20:51:4 ...
在现有K8S集群上安装部署JenkinsX
在2018年年初,Jenkins X首次发布,它由Apache Groovy语言的创建者Jame Strachan创建.Jenkins X 是一个高度集成化的 CI/CD 平台,基于 Jenkins ...
Vue项目的打包\部署\优化
Vue项目的打包\部署\优化如果有帮助到你麻烦点个赞或者收藏 +关注哟以后会经常发布一些干货文章我只是一个前端小菜鸟,大佬勿喷! 一.nginx 开启 gzip 理论上,nginx 开启 ...
前端项目打包优化及上线
前端项目优化及上线根据自己项目实际,进行webpack配置,这里只是一个参考,关于上线很多功能作为了解. 优化问题项目优化策略步骤及详解安装配置 1.生成打包报告=>为了直观发现项目中的问题 ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...

Vue项目从打包优化到上线部署云服务器的全过程（教你在云服务器上优化部署自己的项目）

前言

项目打包优化

项目的打包

项目的优化

项目上线部署

上传项目到服务器

配置nginx

最后

Vue项目从打包优化到上线部署云服务器的全过程（教你在云服务器上优化部署自己的项目）相关推荐

最新文章

热门文章

Vue项目从 打包优化 到 上线部署 云服务器的全过程（**教你在云服务器上优化部署自己的项目**）

前言

项目打包优化

项目的打包

项目的优化

项目上线部署

上传项目到服务器

配置nginx

最后

Vue项目从 打包优化 到 上线部署 云服务器的全过程（**教你在云服务器上优化部署自己的项目**）相关推荐

最新文章

热门文章

Vue项目从打包优化到上线部署云服务器的全过程（教你在云服务器上优化部署自己的项目）

Vue项目从打包优化到上线部署云服务器的全过程（教你在云服务器上优化部署自己的项目）相关推荐