vue项目部署到服务器，怎么把VUE项目部署到服务器上面

大家好，感谢邀请，今天来为大家分享一下vue项目部署到服务器的问题，以及和怎么把VUE项目部署到服务器上面的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

如何操作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如何将项目部署到服务器上并且使外网能够访问到

你的服务器是什么系统啊，，，linux LINUX、WINDOWS、NETWARE、UNIX。。

在linux

首先服务器安装node git nginx vue-cli

安装好nginx用你的公网ip访问就可以看到下面的页面

然后进入到下面的路径

vi default你会看到nginx的默认配置

默认监听80端口根路径

把你写好的vue项目上传到github，通过git clone克隆到

服务器

路径下面

然后npm/yarn add/install安装依赖然后npm run build

vi打开html下面的 index.html可以看到

nginx默认的html

进入sites-enabled发现它里面的 default来自 sites-available的default

所以需要在 sites-available新建一个文件你的项目名命名就可以

在你新建的文件

我在site-available新建的文件是note-admin映射到 sites-enables

注意路径一定要写全

最后重新加载下 nginx-s reload

打开浏览器公网ip:端口号或者域名访问

这就可以了

还有用express部署这个简单些

怎么把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即可

OK，本文到此结束，希望对大家有所帮助。