如何將vue頁面部署到伺服器-ag真人国际官网
㈠ vue項目如何部署到伺服器
第一步配置 vue.config.js
第二步修改路由，改為 hash模式
第三步文件打包,執行以下，目錄中會出現一個dist文件夾，將文件拖到伺服器的 root 文件夾中
第四步可以通過域名進行訪問 http://www.linlin.run/my-project/index.html#/home
㈡ 怎麼把vue項目部署到伺服器上面
1.使用xshell登錄到阿里雲伺服器。安裝nginx（本文安裝到/etc下）
[plain]view plain
cd/etc
apt-getupdate
apt-getinstallnginx
vim/etc/nginx/nginx.conf
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;
}
}
}
assetspublicpath:'/test1/',
exportdefaultnewrouter({
base:'/test1/',//添加這行
linkactiveclass:'active',
routes
});
consturl='/datas/seller';
this.$http.get(url).then((response)=>{
.....
});
servicenginxstart
2.首先先配置nginx，然後再根據配置文件做下一步操作
打開/etc/nginx/nginx.conf文件
[plain]view plain
在nginx.conf中配置如下：
[plain]view plain
接下來就根據配置文件進行下一步工作。配置文件中的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
如果用到了vue-router，則修改/router/index.js
[javascript]view plain
6.nginx配置文件中的location則是針對跨域處理，表示把對/datas的請求轉發給http://ip:port,本文中這個http://ip:port下就是需要的數據，例如http://ip:port/seller,在本地項目文件中ajax請求數據的地方如下
[javascript]view plain
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
9.至此項目部署成功，在瀏覽器下輸入: http://ip/test1/index.html 即可
㈢ vue如何將項目部署到伺服器上並且使外網能夠訪問到
你的伺服器是什麼系統啊 ，，，linux linux、windows、netware、unix。。
在linux
首先伺服器安裝node git nginx vue-cli
安裝好nginx 用你的公網ip訪問就可以看到 下面的頁面
這就可以了
還有 用express 部署這個 簡單些
㈣ vue項目部署iis伺服器
一、將vue項目進行打包編譯後，根目錄生成dist的文件
當出現如上圖顯示時，說明打包編譯完成，已經生成dist文件
二、打開iis伺服器
打開iis伺服器後選中【網站】後右擊選【添加網站】，就可對網站進行配置，物理路徑選擇編譯後的dist文件夾後選確定就行。
三、右擊選擇【啟動】後出現如下報錯信息：
除非windows activation service (was)和萬維網發布服務(w3svc)均處於運行狀態，否則無法啟動網站
解決：
打開命令提示符中輸入services.msc ,打開服務。
找到windows install及word wide web發布服務選項，分別右擊啟動，並右鍵屬性改為啟動類型就可以。
這是重新啟動下，就可以訪問。