当前位置：首页 » 文件传输 » vuenginx访问后台自动加api
扩展阅读
提分平台的账号密码是什么 2023-08-31 22:07:10
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

vuenginx访问后台自动加api

发布时间: 2022-05-21 09:09:24

① vue开发模式能访问nginx吗

从vue-router官网了解到如果是用history模式构建的vue项目打包后是需要后端配置支持的，而hash是不需要的，只不过地址会多了一个#/的后缀。使用hash模式构建的项目打包后，我只需要使用webstorm之类的软件打开访问就能成功了。

但是我用history模式构建的项目需要借助后台技术，我这里选用的是nginx反向代理来部署项目。具体做法如下：

1、创建后台服务器 对象
upstream mixVueServer{
server .com;#这里是自己服务器域名
}

2、创建访问端口和反向代理规则
server {
listen 8082;
server_name localhost;

location / {
root E:/mix_vue/dist;#定位到项目的目录
#index index.html index.htm;
try_files $uri $uri/ /index.html;#根据官网这规则配置
}
location ~ \.php${
proxy_pass mixVueServer;#根据后端语言做反向代理处理跨域问题
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}

}

② vue为啥会访问两次后端接口呢

使用vue.js与后台实现数据交互的方法是利用vue-resource组件提供的一系列api：
get(url, [data], [success], [options])
post(url, [data], [success], [options])
put(url, [data], [success], [options])
patch(url, [data], [success], [options])
delete(url, [data], [success], [options])
jsonp(url, [data], [success], [options])

具体举例如下：
1、导入vue-resource

2、基于全局Vue对象使用http
// 通过someUrl获取后台数据，成功后执行then的代码
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
3、在一个Vue实例内使用$http
// $http是在vue的局部范围内的实例
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
说明：
在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

③ 怎么把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.js与后台实现数据交互

使用vue.js与后台实现数据交互的方法是利用vue-resource组件提供的一系列api：
get(url, [data], [success], [options])
post(url, [data], [success], [options])
put(url, [data], [success], [options])
patch(url, [data], [success], [options])
delete(url, [data], [success], [options])
jsonp(url, [data], [success], [options])

具体举例如下：
1、导入vue-resource
2、基于全局Vue对象使用http
// 通过someUrl获取后台数据，成功后执行then的代码
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
3、在一个Vue实例内使用$http
// $http是在vue的局部范围内的实例
...使用vue.js与后台实现数据交互的方法是利用vue-resource组件提供的一系列api：
get(url, [data], [success], [options])
post(url, [data], [success], [options])
put(url, [data], [success], [options])
patch(url, [data], [success], [options])
delete(url, [data], [success], [options])
jsonp(url, [data], [success], [options])

说明：
在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

⑥ vue-cli 配置的proxyTable代理请求api只能在开发环境下用吗

一般都是build之后部署到正式环境吧，对于你说的放到Apache下，实际对于/api/xxx的请求也是针对该Apache Server的。所以你需要给Apache搞一个/api 的rewrite（反向代理）
可以参考nginx的配置：
location /api/ {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded $proxy_add_x_forwarded_for;
proxy_pass http://news-at.hu.com/api/;
}

⑦ 请教nginx 配置 vue 的问题

可以用护卫神.nginx大师，一键安装nginx+php+mysql+ftp

⑧ 用vue访问接口能正常返回数据，但是报500错误，用postman提交一样的参数请求也正常，这是为什么呢

我的也是用POSTman可以获取数据,我这边用axios去获取,加了application/x-www-form-urlencoded也是传不过来数据,一直报500,说是XMLhttp请求不对,困扰了好几天了,一直在想有没有人专写一个接口组件,可以接受各种类型的接口,每次还要去针对的写,太麻烦.什么form-data,x-www-form-urlencoded

⑨ nginx 代理vue项目 卡死

nginx代理vue项目卡死可能是Vue项目配置的问题。
建议找到Vue项目中的build目录下的webpack、dev、js文件。
在devServer下添加disableHostCheck：true，即跳过检查，如此访问Vue项目时就不会进行主机检查，随后重启项目即可解决问题。

⑩ 使用nginx提供网站后台的web接口，经常出现访问出现500，删除浏览器缓存后，又正常

查看下日志，排查下（王道）。也可以按以下步骤来排查
1、系统打开文件数是否不够用 ulimit -n
2、nginx所在目录或者web目录磁盘空间不够了
3、nginx配置文件是否存在错误 ，比如重写规则啊什么的
4、网站程序是否有错误，如果是比如打开静态html文件和php是否都会遇到同样的问题。如果还是遇到同样的问题，那说明不是程序的问题。

阅读全文

与vuenginx访问后台自动加api相关的内容

本站内容整理源于互联网，如有问题请联系解决。
Copyright design: www.gotrillian.com since 2022