如何訪問伺服器上的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埠。