當前位置：首頁 » 文件傳輸 » 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