大家好，今天给各位分享vue服务器部署的一些知识，其中也会对怎么把VUE项目部署到服务器上面进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
一、怎么把VUE项目部署到服务器上面
1.使用xshell登录到阿里云服务器。安装nginx（本文安装到/etc下）
[plain]view plaincopy
cd/etc
apt-getupdate
apt-getinstallnginx
2.首先先配置nginx，然后再根据配置文件做下一步操作
打开/etc/nginx/nginx.conf文件
[plain]view plaincopy
vim/etc/nginx/nginx.conf
在nginx.conf中配置如下：
[plain]view plaincopy
user-data;
worker_processesauto;
pid/run/nginx.pid;
events{
worker_connections768;
#multi_aepton;
}
{
##
#BasicSettings
##
tcp_nodelayon;
keepalive_timeout65;
types_hash_max_size2048;
#server_tokensoff;
#server_names_hash_bucket_size64;
#server_name_in_redirectoff;
include/etc/nginx/mime.types;
default_typelication/octet-stream;
##
#SSLSettings
##
ssl_protocolsTLSv1TLSv1.1TLSv1.2;#DroppingSSLv3,ref:POODLE
ssl_prefer_server_cipherson;
##
#LoggingSettings
##
aess_log/var/log/nginx/aess.log;
error_log/var/log/nginx/error.log;
##
#GzipSettings
##
gzipon;
gzip_disable"msie6";
#gzip_varyon;
#gzip_proxiedany;
#gzip_p_level6;
#gzip_buffers168k;
#gzip__version1.1;
##
#VirtualHostConfigs
##
gzipon;
gzip_disable"msie6";
#gzip_varyon;
#gzip_proxiedany;
#gzip_p_level6;
#gzip_buffers168k;
#gzip__version1.1;
#gzip_typestext/plaintext/csslication/jsonlication/j*ascripttext/xmllication/xmllication/xml+rsstext/j*ascript;
##
#VirtualHostConfigs
##
include/etc/nginx/conf.d/*.conf;
include/etc/nginx/sites-enabled/*;
#以下为我们添加的内容
server{
listen80;
server_nameyour-ipaddress;
root/home/my-project/;
indexindex.html;
location/datas{
rewrite^.+datas/?(.*)$/$1break;
includeuwsgi_params;
proxy_pass;
}
}
}
接下来就根据配置文件进行下一步工作。配置文件中的server_name后面是阿里云服务器的ip
3.配置文件中的listen是nginx监听的端口号，所以需要在阿里云服务器上为80端口添加安全组规则
在本地的浏览器登录阿里云服务器->进入控制台->安全组->配置规则->添加安全组规则，之后配置如下（注：入方向和出方向都要配置）
4.配置文件中的root和index那两行表示我们把项目文件夹放在/home/my-project下
例如有两个项目文件夹分别为test1，test2，里面都有index.html。则目录结构如下
/home
|--my-project
|--test1
|--index.html
|--test2
|--index.html
则在浏览器输入
服务器便会在/home/my-project中找到test1下的index.html执行；
如果在浏览器中输入
服务器便会在/home/my-project中找到test2下的index.html执行；
这样便可以在服务器下放多个项目文件夹。
5.所以我们也需要在本地项目的config/index.js里的build下进行修改,如果要把项目放到test1下，则
[j*ascript]view plaincopy
assetsPublicPath:'/test1/',
如果用到了vue-router，则修改/router/index.js
[j*ascript]view plaincopy
exportdefaultnewRouter({
base:'/test1/',//添加这行
linkActiveClass:'active',
routes
});
6.nginx配置文件中的location则是针对跨域处理，表示把对/datas的请求转发给,本文中这个下就是需要的数据，例如,在本地项目文件中ajax请求数据的地方如下
[j*ascript]view plaincopy
consturl='/datas/seller';
this.$.get(url).then((response)=>{
.....
});
7.修改后在本地命令行下运行:pm run build生成dist文件。把dist文件里的index.html和static文件上传到服务器的/home/my-project/test1下，目录结构如下
/home
|--my-project
|--test1
|--index.html
|--static
8.启动nginx
[plain]view plaincopy
servicenginxstart
9.至此项目部署成功，在浏览器下输入: 即可
二、如何解决把Vue项目部署到服务器上出现的问题
本篇文章主要介绍了Vue项目部署到服务器的问题解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候，在开发环境中项目可以很正常的运行，但是进入到生产环境，编译打包后，放入服务器，项目就不正常了，会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张，正确的配置加上后端的简单配合就可以解决。
如何打包
基于Vue-Cli,通过npm run build来进行打包的操作
如何部署
将打包出来的资源，基于Vue-Cli的一般是dist目录下有static目录和index.html文件，可以将这两个文件扔到服务端
但有时候，我们会将dist文件扔到服务端
出现的问题
打包到服务器后，出现资源引用路径的问题
打包到服务器后，出现空白页的问题
打包到服务器后，出现引入的css的type被拦截转换为"text/plain"问题
打包到服务器后，出现路由刷新404的问题
下面笔者根据自己Vue项目从编译打包到正常部署服务器的经验，来告诉大家如何解决这些问题。
一、前端配置：
①、router配置--指定路由起始(在开发模式中，Vue项目被放在了webpack配合nodeJs生成的本地服务器的根目录，但是在真实服务器中，项目肯定不会放在根目录，所以要指定router的base)
router
提前和后端商量好项目部署的服务器文件夹路径
②、编译打包配置
进入config--> index.js
build
③、使用npm run build进行打包，至此前端能做的配置已经做完
二、后端配置：
路由跳转出现404，主要原因是后端对这个虚拟的前端路由没有做任何处理，服务器在找不到指定路径下的资源时，只能向客户端返回404。
解决办法(Apache)：进行url重写---将Vue项目所在服务器文件夹下的路径，例如：
leibo.group/pcMall/....重写为 leibo.group/pcMall/index.html
.hatess
具体的Apache开启allowoverride，url重写，后端分分钟就解决了
如果是其他类型服务器
请自行参考
总结：在单页面部署服务器中，其实更多的是思想的改变，利用前端路由来控制用户界面内容的变更，
三、vuejs怎么在服务器部署
既然是布署，哪默认就应该是生产环境下的布署，vue开发的应用本质上就是静态文件,无论你用何种web服务器，放上去就应该能通过访问
接下来我来帮大家来捋一捋
首先VUE是一个j*ascript的前端框架，注定了它是运行在浏览器里的，对服务器本地没有任何要求，只要一个静态文件服务器能通过访问到其资源文件就足矣！无论你是用apache,ngnix就算你要用node自己实现一个静态文件服务器，也用不了多少行代码。
npm run dev是用来在本地开发的时候做调试用的，vue开发的是前端的东西，不是nodejs服务端程序，按道理讲，生产环境里就不该存在npm，甚至nodejs也不需要（用nodejs来做web静态服务的除外），楼主通过ssh进入到服务器里，再运行npm run dev来启动哪是开发机上做的事情。正确的做法很简单，通过npm run build把生成的dist文件夹（不要上传文件夹）里的内容上传到服务器上就可以通过 来访问了，开发机上正常，上传以后程序出现错误不能运行的原因99.99%的可能*是你引用资源的路径有问题。
一般如果vue框架的程序上传到网站服务器的根目录下是不会有问题的，也不存在资源文件引用错误的情况，但如果你不是根目录，就会有问题，通过vue-cli生成的开发目录，build以后默认引用资源文件的路径是
有更多疑问”可以咨询”小鸟云，它是的一家服务器厂商，我一直在用他们产品！