如何访问服务器上的vue项目

‘壹’ 一台服务器，多个域名，怎么同时启动多个vue项目

可以将多个域名解析到这台服务器ip
然后在服务器端配置项目就可以了

‘贰’ 如何使用docker部署vue项目

熟悉vue项目的开发朋友应该了解，对于vue项目来说，上线其实就是执行npm run build 命令，然后将build出的dist文件夹上传到服务器上就可以了，对于现在的前后端分离项目来说，就是把dist放到nginx的html文件夹即可。

上传的过程既可以手动实现，也可以通过jenkins这类在线编译软件，总之，殊途同归。

除了上面两种还有一种现在比较火的部署方式，就是docker部署，当然正如上面说的，docker也是要实现上面的操作，只不过有些差异而已。

针对docker部署需要了解的是，一般我们只需要拉取nginx镜像，把dist文件夹写入镜像即可，不需要去镜像里面执行拉取代码、执行编译、打包等操作。这些操作一般在写入镜像执行。

这样做的目的跟docker的理念是一致的，功能解耦，方便维护，而且对于一些大公司来说，可能还需要将编译后的代码进行扫描等操作，如果在docker镜像内编译的话如果出现错误是不好定位问题的。

那么如何实现docker部署vue项目呢，操作如下参考：

文件目录如下：

在vueProject 根目录下新建Dockerfile文件，注意没有后缀，nginx镜像默认服务器的目录在/usr/share/nginx/html，内容如下：

build项目：

Build完成后会生成dist目录

然后在vueProject根目录下打开命令行执行如下命令生成镜像：

注意最后是一个点，代表在当前目录执行Dockerfile

如果没报错说明执行成功，此时可以在docker镜像列表看到该镜像。

启动镜像：

—name vp 代表自定义启动的镜像名称

-dp 是-d,-p的简写

8088:80 代表在宿主机的8088端口映射镜像的80端口，因为nginx默认的服务器端口就是80

最后就是之前生成的镜像名称。

大功告成。

更多详情：javascript技术分享

‘叁’ 怎么把VUE项目部署到服务器上面

1.使用xshell登录到阿里云服务器。安装nginx（本文安装到/etc下）

[plain]view plain

• cd/etc

• apt-getupdate

• apt-getinstallnginx

2.首先先配置nginx，然后再根据配置文件做下一步操作

打开/etc/nginx/nginx.conf文件

[plain]view plain

• vim/etc/nginx/nginx.conf

在nginx.conf中配置如下：

[plain]view plain

• 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 plain

• assetsPublicPath:'/test1/',

如果用到了vue-router，则修改/router/index.js

[javascript]view plain

• exportdefaultnewRouter({

• base:'/test1/',//添加这行

• linkActiveClass:'active',

• routes

• });

6.nginx配置文件中的location则是针对跨域处理，表示把对/datas的请求转发给http://ip:port,本文中这个http://ip:port下就是需要的数据，例如http://ip:port/seller,在本地项目文件中ajax请求数据的地方如下

[javascript]view plain

• 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 plain

• servicenginxstart

9.至此项目部署成功，在浏览器下输入: http://ip/test1/index.html 即可

‘肆’ vue如何将项目部署到服务器上并且使外网能够访问到

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

在linux

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

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

这就可以了

还有 用express 部署这个 简单些

‘伍’ 后台重定向到vue项目获取session

登录：登陆页面单独出来，和vue项目分开，login.jsp页面登陆成功后重定向到vue项目的首页路由地址。

到Vue后台项目后有两处会用到session验证处理：通过webpacke+路由的方式构建的后台项目，排除蒙对了静态页面的地址哈，这个自己想办法也好解决。

1、路由之间跳转（vue项目页面之间跳转）

解决：此时的跳转请求没有进入后台，需要在vue-route的全局钩子中跳转到每个路由之前进行session验证请求

router.beforeEach((to,from,next)=>{
_vue.$http.post(_vue.getUrl()+"/login/checkSession.do",{emulateJSON:true})
.then((response)=>{
if(response.body.code=="500"){//session过期
window.location.href=_vue.getUrl()+"/admin/";
}else{
next();
}
},(response)=>{
this.$Message.error("路由校验session失败！",3);
});

});

‘陆’ 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 axios怎么访问服务器和端口配置

家庭组同样不需要密码的，设置成家庭网络后，将你要共享的文件右击，设置成家庭组共享就OK了

‘捌’ F5服务器能运行vue吗

tml页面空白，刷新当前路由404。。。用react做的项目也同样遇到类似问题。现在我们一起讨论下单页面如何部署到服务器？

由于前端路由缘故，单页面应用应该放到nginx或者apache、tomcat等web代理服务器中，千万不要直接访问index.html，同时要根据自己服务器的项目路径更改react或vue的路由地址。

如果说项目是直接跟在域名后面的，比如: ，根路由就是 '/'。

如果说项目是直接跟在域名后面的一个子目录中的，比如: ，根路由就是 '/children '，不能直接访问index.html。

以配置Nginx为例，配置过程大致如下：（假设：

1、项目文件目录： /mnt/html/spa（spa目录下的文件就是执行了npm run dist 后生成的dist目录下的文件）

2、访问域名：spa.sosout.com）

进入nginx.conf新增如下配置：

server {
listen 80;
server_name spa.sosout.com;
root /mnt/html/spa;
index index.html;
location ~ ^/favicon\.ico$ {
root /mnt/html/spa;
}

location / {
try_files $uri $uri/ /index.html;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
access_log /mnt/logs/nginx/access.log main;
}
注意事项：

1、配置域名的话，需要80端口，成功后，只要访问域名即可访问的项目

2、如果你使用了react-router的 browserHistory 模式或 vue-router的 history 模式，在nginx配置还需要重写路由：

server {
listen 80;
server_name spa.sosout.com;
root /mnt/html/spa;
index index.html;
location ~ ^/favicon\.ico$ {
root /mnt/html/spa;
}

location / {
try_files $uri $uri/ @fallback;
index index.html;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location @fallback {
rewrite ^.*$ /index.html break;
}
access_log /mnt/logs/nginx/access.log main;
}
为什么要重写路由？因为我们的项目只有一个根入口，当输入类似/home的url时，如果找不到对应的页面，nginx会尝试加载index.html，这是通过react-router或vue-router就能正确的匹配我们输入的/home路由，从而显示正确的home页面，如果browserHistory模式或history模式的项目没有配置上述内容，会出现404的情况。

‘玖’ vue启动服务器之后，局域网内手机可以访问吗

1、用路由器，或者有DHCP服务器--你目前的问题应该在这里 路由器设置(具体哪里设置自己找，不同的路由器菜单不一样): DMZ主机指向到192.168.1.100; 设置80端口指定到192.168.1.100 2、如果设置了apache虚拟主机，记得两个IP都要设置;如果没有设置就不用管。 3、确定ISP服务商没有关闭80端口。