❶ vue項目打包部署後請求地址及請求問題
1 首先 vue中 是用的axios 發請求, axios 支持Promise 非常好用, 可以在請求後的.then()中拿到請求回來的數據,像這樣
2 請求方式有很多, 如get post put get 又稱為 queryParams 所以攜帶參數後看發的請求是拼串的,像這樣
寫的時候你可以採取拼串的寫法 像 'page = ' + page + '&size=『size 這種寫法,但這種寫法過於死板, 當後台要求你穿的參數 是有值時就傳 沒值時不傳 這樣就不可以了 因為就算做收集的表單沒有數據,也會傳一個key過去,這樣到後台 後台就會收到一個空值 , 這時候你可以用get請求的另一種方式 params, 這種寫法相對靈活 寫起來也比較簡便 像這樣
但當你被要求沒值時不傳 你就要做一些處理了 比如 把所有要傳得數據都放在一個對象中,在發請求前對象做一下處理 刪掉沒有值得那條屬性 比如這樣
3 還有就是 發請求的問題了 因為在開發的時候會有跨域問題,我們一般為了方便都會 配置一個代理proxyTable, 但是在打包部署後在伺服器上會有問題 因為伺服器上沒有跨域 請求地址會錯, 但是像我上篇帖子中說的那樣 每一次打包前都 把請求地址改為伺服器地址 那樣又很麻煩, 所以我是這么做的,
我在config/dev.en.js中配置了一下 像這樣
在config/prod.env.js中這樣配置
在組件中發請求時這樣寫
我認為這樣還是比較好用的 如果那裡除了問題你需要在 調試工具的network中查看請求地址 看是不是正確 ,不正確改就行了
這些都是比較基礎的,但很實用,希望可以幫到你們
❷ vue項目部署iis伺服器
一、將vue項目進行打包編譯後,根目錄生成dist的文件
當出現如上圖顯示時,說明打包編譯完成,已經生成dist文件
二、打開iis伺服器
打開iis伺服器後選中【網站】後右擊選【添加網站】,就可對網站進行配置,物理路徑選擇編譯後的dist文件夾後選確定就行。
三、右擊選擇【啟動】後出現如下報錯信息:
除非Windows Activation Service (WAS)和萬維網發布服務(W3SVC)均處於運行狀態,否則無法啟動網站
解決:
打開命令提示符中輸入services.msc ,打開服務。
找到windows install及word wide web發布服務選項,分別右擊啟動,並右鍵屬性改為啟動類型就可以。
這是重新啟動下,就可以訪問。
❸ vue如何將項目部署到伺服器上並且使外網能夠訪問到
你的伺服器是什麼系統啊 ,,,linux LINUX、WINDOWS、NETWARE、UNIX。。
在linux
首先伺服器安裝node git nginx vue-cli
安裝好nginx 用你的公網ip訪問就可以看到 下面的頁面
這就可以了
還有 用express 部署這個 簡單些
❹ Vue打包並自動部署到指定伺服器
安裝依賴
配置備用環境變數
在根目錄下創建.env.development文件,並添加環境變數
VUE_APP_SERVER_ID = 0
在根目錄下創建.env.proction文件,並添加環境變數
VUE_APP_SERVER_ID = 1
創建自動化部署腳本
在package.json同級目錄下創建文件夾deploy
在deploy文件下創建config.js和servers.js和index.js
servers.js:配置伺服器相關信息
config.js:發布前的一些處理
index.js:發布到伺服器的處理邏輯
添加package.json中的scripts命令
效果如下
❺ 通過配置文件實現修改vue域名
我們的前端項目一般在打包時就會將伺服器域名或者ip配置好,在打包生成的文件直接部署到對應伺服器就行了。但是公司的項目要求可以部署私有雲或者區域網內,項目的ip地址可能是動態變化的,或者說不同的區域網內ip不是不同的,因此要實現可以讓工程人員去修改訪問的伺服器ip來做到一次打包多處使用的效果。
當然,這樣做在我們看來是有一定風險的,會暴露出一些東西,存在一定的危險,同樣也提供了一定的便捷性(說白了就是,如果不這樣實現,現場售後服務人員會罵娘,因為每個項目都要打包一次,領導呢會感覺,『 你個垃圾,就這都不能實現,怎麼可能,解釋那麼多,不就是做不出來,垃圾 』)。
綜上,我這里對公司項目進行了相關實現,其實挺簡單的,如下:
1,在根目錄下的public目錄中添加config.js文件,內容如下:
項目打包的時候會將該文件拷貝到打包文件的根目錄中。
2,配置封裝的axios,我的axios封裝在request.js文件中,這里我節選了需要添加和修改的地方
3,將config.js文件在index.html文件中引入
❻ 怎麼把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項目如何部署到伺服器
第一步配置 vue.config.js
第二步修改路由,改為 hash模式
第三步文件打包,執行以下,目錄中會出現一個dist文件夾,將文件拖到伺服器的 root 文件夾中
第四步可以通過域名進行訪問 http://www.linlin.run/my-project/index.html#/home