vue部署到服务器 怎么把VUE项目部署到服务器上面
大家好，vue部署到服务器相信很多的网友都不是很明白，包括怎么把VUE项目部署到服务器上面也是一样，不过没有关系，接下来就来为大家分享关于vue部署到服务器和怎么把VUE项目部署到服务器上面的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！
vuejs怎么在服务器部署
既然是布署，哪默认就应该是生产环境下的布署，vue开发的应用本质上就是静态文件,无论你用何种web服务器，放上去就应该能通过http访问
接下来我来帮大家来捋一捋
首先VUE是一个javascript的前端框架，注定了它是运行在浏览器里的，对服务器本地没有任何要求，只要一个静态文件服务器能通过http访问到其资源文件就足矣！无论你是用apache,ngnix就算你要用node自己实现一个静态文件服务器，也用不了多少行代码。
npm run dev是用来在本地开发的时候做调试用的，vue开发的是前端的东西，不是nodejs服务端程序，按道理讲，生产环境里就不该存在npm，甚至nodejs也不需要（用nodejs来做web静态服务的除外），楼主通过ssh进入到服务器里，再运行npm run dev来启动哪是开发机上做的事情。正确的做法很简单，通过npm run build把生成的dist文件夹（不要上传文件夹）里的内容上传到http服务器上就可以通过 http来访问了，开发机上正常，上传以后程序出现错误不能运行的原因99.99%的可能性是你引用资源的路径有问题。
一般如果vue框架的程序上传到网站服务器的根目录下是不会有问题的，也不存在资源文件引用错误的情况，但如果你不是根目录，就会有问题，通过vue-cli生成的开发目录，build以后默认引用资源文件的路径是
有更多疑问”可以咨询”小鸟云，它是的一家服务器厂商，我一直在用他们产品！
怎么把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
userwww-data;
worker_processesauto;
pid/run/nginx.pid;
events{
worker_connections768;
#multi_accepton;
}
http{
##
#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_typeapplication/octet-stream;
##
#SSLSettings
##
ssl_protocolsTLSv1TLSv1.1TLSv1.2;#DroppingSSLv3,ref:POODLE
ssl_prefer_server_cipherson;
##
#LoggingSettings
##
access_log/var/log/nginx/access.log;
error_log/var/log/nginx/error.log;
##
#GzipSettings
##
gzipon;
gzip_disable"msie6";
#gzip_varyon;
#gzip_proxiedany;
#gzip_comp_level6;
#gzip_buffers168k;
#gzip_http_version1.1;
##
#VirtualHostConfigs
##
gzipon;
gzip_disable"msie6";
#gzip_varyon;
#gzip_proxiedany;
#gzip_comp_level6;
#gzip_buffers168k;
#gzip_http_version1.1;
#gzip_typestext/plaintext/cssapplication/jsonapplication/javascripttext/xmlapplication/xmlapplication/xml+rsstext/javascript;
##
#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_passhttp://ip:port;
}
}
}
接下来就根据配置文件进行下一步工作。配置文件中的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
则在浏览器输入http://ip/test1/index.html
服务器便会在/home/my-project中找到test1下的index.html执行；
如果在浏览器中输入http://ip/test2/index.html
服务器便会在/home/my-project中找到test2下的index.html执行；
这样便可以在服务器下放多个项目文件夹。
5.所以我们也需要在本地项目的config/index.js里的build下进行修改,如果要把项目放到test1下，则
[javascript]view plaincopy
assetsPublicPath:'/test1/',
如果用到了vue-router，则修改/router/index.js
[javascript]view plaincopy
exportdefaultnewRouter({
base:'/test1/',//添加这行
linkActiveClass:'active',
routes
});
6.nginx配置文件中的location则是针对跨域处理，表示把对/datas的请求转发给http://ip:port,本文中这个http://ip:port下就是需要的数据，例如http://ip:port/seller,在本地项目文件中ajax请求数据的地方如下
[javascript]view plaincopy
consturl='/datas/seller';
this.$http.get(url).then((response)=>{
.....
});
7.修改后在本地命令行下运行:cnpm 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.至此项目部署成功，在浏览器下输入: http://ip/test1/index.html即可
如何操作vue项目打包给服务器
这次给大家带来如何操作vue项目打包给服务器，vue项目打包给服务器的注意事项有哪些，下面就是实战案例，一起来看一下。
当我们将 vue项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple）脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat上。
如果是 vue-cli(非 simple脚手架)，这篇文章可能有点帮助。地址链接：vue-cli如何打包上线
先来描述一下期间遇到的问题有哪些：
1、打包后将 dist文件夹和 index.html放到 tomcat，在浏览器中访问时，出现空白页，f12提示 404。
2、打包好的静态资源均是绝对路径，无法引入进项目，也是 404。
1、项目目录结构
这是打包后的，所以有 dist文件夹，打包方式：npm run build。
2、webpack.config.js
这里只是一小部分，因为这边最关键的就是 publicPath,下面会提，这边可以解决静态资源 404无法引入的问题。
3、npm run build打包后的文件。
npm run build打包后生成一个 dist文件夹，这里面的目录：
我对 webpack打包工具的原理不是很清楚，所以文件夹应该生成什么不是了解。我这边是这样子的。主要是一个主要的 build.js,因为我们的 index.html引入的就是这个 js文件。还有一些图片文件和 ElementUI生成的 ttf和 woff。
4、如何放到服务器中。
接下来就是需要将生成的 dist文件夹和 index.html文件放到服务器中，只需要这两个。首先我将这两个文件放在同一个文件夹中，我命名为 gas（随意）。
然后将文件夹放到 tomcat中，我将文件夹放到 tomcat的 webapps文件夹目录下：
ok部署完成,启动 tomcat，你会发现显示一个空白页，一些静态资源都是 404。
5、解决空白页和静态资源无法引入的问题。
1、首先空白页的问题，可以重 f12中看出来都是绝对路径的原因，而我们打包后，应该的引入路径是相对路径，这时我们需要的是修改 index.html页面。
看一下没改之前的：
看我/dist/build.js引用的是绝对路径，这就导致了在 tomcat去访问 index.html页面时，报404。我们需要将路径变成相对路径./dist/build/。多一个点，很关键。好了到这里应该主页面可以显示了。
但是你会发现，我的静态资源，我的图片（不包括 img形式的引入），例如我在 css中 background:url()的图片显示404。
2、解决静态资源失效的问题
这就需要修改我们的 webpack.config.js中的 publicPath了，默认的 vue-cli脚手架环境搭建好后，publicPath是这样的：
可以看到我们的路径是：/dist/。所以这时候我们如果打开页面，静态资源的路径都会是这样子的，并且报错404：http://10.0.0.181:8088/dist/bg.png?fe9b889cea51978538ce352593be0573
显然可以看出和我们想要的路径不一致，上面我贴出来的在 tomcat的文件目录中我将 dist和 index.html都放进了一个 gas的文件夹中。所以正确的路径应该是这样的：
http://10.0.0.181:8088/gas/dist/bg.png?fe9b889cea51978538ce352593be0573
看出区别了吗！
解决：
所以我需要改变一下 webpack.config.js中的输出路径 publicPath:/gas/dist/。将最外层的文件夹路径加进去，这样就可以将静态资源引入进项目了。
ok,到现在为止，最主要的两个问题解决了，一个是 index.html空白页，另一个是静态资源路径不正确的问题。
6、index.html页面中的link和 srcipt引用的资源失效问题：
原因还是路径的地址不对：
妥协的解决方法是：将自己引用的资源手动放到打包出来的 dist文件夹内，然后在 index.html中按照 dist的相对路径进行引用。
代码中的 icon.ico就是我手动将 icon图标放到 dist文件夹中，然后按照对应的引用路径进行引用。其他的 css和 js引用一样。
7、待解决的问题：
1、在我的项目中，使用了 ElementUI框架，但是在打包放到服务器中后，发现按钮样式变了，所有的 padding失效，所有我只能自己手动进行添加样式。
2、在我的 index.html中如果引入 link css文件时，还是没办法引入相对路径，所以我将 css样式都放到了各自的组件中的 style中了，其他的一般都是用 npm注入依赖的形式进行安装。
8、网上搜索到的相关问题和解决方法。
1、求助！Vue项目用Webpack打包后放到服务器上，但访问是空白页？弄了好久了也不知道什么原因
2、vue项目中，npm run build生成的index.html文件只有放在根目录下打开才能生效，怎么解决？
3、Vue应用部署到服务器的正确方式
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
怎样使用React服务器端渲染
如何使用vue.js做出编辑菜谱功能
vue部署到服务器的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于怎么把VUE项目部署到服务器上面、vue部署到服务器的信息别忘了在本站进行查找哦。