Vue项目的部署简述

stefanieliang 发布于2019-08-26 10:32 / 2913人阅读

摘要：但是有些工程师学过一些自以为很高深，把项目部署在静态服务文件夹下然后启动服务器以带动项目。

现在vue-cli已经是前端工程师必会的框架了（没有之一），很多前端工程师只会Vue项目的开发，并不会部署，因为大部分公司项目的部署工作是交给自己的上级或者项目管理者的，关于部署的相关知识可能大家都不甚了解，今天就给大家深入讲解一下我对Vue项目部署的心得和体会！

1.Vue项目打包

vue项目的打包可能大家都不陌生，一句npm run build就完事了，打包完成后项目会生成一个“dist”文件夹，里面是打包好的“静态文件”。那关于“静态文件”大家可能都不陌生，前端之前的项目都是由静态文件构成的，虽然现在前端的项目工程化了，但是；所谓“万变不离其宗”，它的本来面目还是静态文件而已！

2.准备静态服务器

我们上文说到Vue打包完成后是静态文件，因此我们部署Vue项目只需要准备一个静态服务器即可，与PHP项目的部署无异。但是有些工程师学过一些Node.js自以为很高深，把项目部署在Node静态服务文件夹下......然后启动Node服务器以带动Vue项目。大家说这种方法如何？我只能说这样的项目只是一个“玩具”，因为Node本身就不够强大和稳定，更何况它的静态服务呢？

3.nginx部署

本文为大家推荐的是用nginx部署Vue项目，nginx能做的事情太多了，我们常用的有：正向代理、反向代理、负载均衡等，它的知识你想学三天三夜都学不完，之前在图书馆看到nginx的教程有那么厚，而我们用不到那么多，只需要学会用nginx部署我们的Vue项目就可以了，以下是最简单的nginx配置：

http {    
    include       mime.types;  
    default_type  application/octet-stream;  
    sendfile        on;
   
    server {
   
       listen 80;  #端口             
       server_name localhost; #可换成你的域名    
       root /var/www/vue/; #项目目录   
       index index.html;
   
       } }

好了，以上就是Vue项目部署的一些知识，如果还不明白可以在博客下面留言

GPU云服务器云服务器腾讯云服务器部署vue项目 java项目的部署云服务器搭建vue项目 vue项目放到云服务器上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106329.html

前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

pumpkin9 2019-08-23 17:12 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

Carson 2019-07-31 10:21 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

muzhuyu 2019-07-01 12:43 评论0 收藏0