uniApp 打包H5工程 超詳細（打包-實現跨域-nignx配置）
uniApp 打包H5工程 超詳細（打包-實現跨域-nignx配置）
參考文獻：
https://zhuanlan.zhihu.com/p/158100556
https://www.csdn.net/tags/MtTaEgxsNDk5OTAxLWJsb2cO0O0O.html
https://www.jb51.net/article/180961.htm
打包步驟
當前端uniapp寫的專案開發完成的時候，需要將頁面打包出來，生成H5的靜態檔案，部署在伺服器上，通過伺服器連結地址，就可以直接在手機上點開訪問 了。
在網上看了一圈，好像沒有找到十分詳細的教程，這裡稍微詳細的記錄了一下，uniapp打包成H5部署到伺服器教程。
步驟如下：
1：點選高階按鈕，進入到manifest.json的h5配置裡面，根據自己的情況配置一些資訊，我這裡是預設的。（）
一定要注意配置執行時候的基礎路徑（下圖紅色框標記的地方），如果出現空白頁面或者靜態檔案404的情況，可能是因為這個路徑沒有配置好。
（多嘴一句，這個執行的基礎路徑，是和編譯之後的靜態檔案的資料夾是一致的，預設是h5，我這裡改名字了，我這裡將靜態檔案h5的資料夾改成了yue-yst-bbdb專案需要，即一般來說就專案名稱）。
2：點選選單欄發行，點選選擇網站-H5手機版，
3：在網站域名這一欄填寫，網站域名，例如www.xxx.com或者你的伺服器的IP地址47.103.XX.XX，（這個地址是你將專案打包之後存放放靜態檔案的地址）。總的來說就是你準備要把這個H5打包後放到的那一臺伺服器的IP
我這裡為了考慮到安全因素，將自己的伺服器地址馬賽克了。
4：點擊發行，控制檯會自動編譯
注意這個不同於vue，編譯完成的檔案不支援本地file協議開啟。不要使用資源管理器直接開啟。直接開啟靜態檔案是看不到東西的。出現以下提示，說明編譯成功 下面有個路徑就是打好的H5包（裡面放了 static+html ）
5：找一個工具，連線自己的伺服器，進入到自己的伺服器的根目錄底下。
我這裡用的是Xftp工具。，我在根目錄底下新建了一個yue-yst-bbdb,（即靜態H5的資料夾重新命名了）
總的來說就是：建立一個以專案名（yue-yst-bbdb ）的資料夾，然後裡面放入4步驟中的 （static+html ）就好啦
好的，這個時候就已經部署成功了。
6：開啟瀏覽器，輸入伺服器ip地址，訪問一下index.html的內容吧
http://19.130.xxx.xxx:8089/yue-yst-bbdb/index.html#/
主機ip和埠號也要注意，這裡是我的主機和埠號，隱藏起來了。
7：注意，這三個地方的路徑名稱一定要一致哦。
1：打包時候的配置的執行的基礎路徑
2：伺服器根目錄底下存放靜態檔案static和index.html
3：瀏覽器裡面訪問的路徑
實現跨域
其實很簡單：以下位置加上
"h5" : {
"devServer" : {
"proxy" : {
//配置代理伺服器來解決跨域問題，uniapp不適用CORS方案和設定JSONP方案
"/api" : {
//對映域名
"target" : "http://19.xxx.245.xxx", //測試環境
"changeOrigin" : true, //是否跨域
"secure" : true, // 是否支援 https 協議的代理
"pathRewrite" : {
"^/api" : ""
}
}
}
}
}get請求方式：(注意 ”/api“ 這個就是配置的代理==>http://19.xxx.245.xxx)
uni.request({
method: "GET",
url: "/api/way/gate/get-token",
success: function(res) {
if (res) {
console.log("response", res);
if (res.statusCode == 200) {
if(res.data.access_token!=undefined && res.data.access_token!=''){
callbackFunction(res.data.access_token);
}else{
failCallback();
}
} else {
failCallback();
}
}
},
fail: function() {
console.log("resquest fail");
uni.showToast({
icon: "none",
title: "網路連結異常，操作失敗"
});
if (failCallback) {
failCallback();
}
}
});post請求方式：(注意 ”/api“ 這個就是配置的代理==>http://19.xxx.245.xxx)
uni.request({
method: "POST",
header: {
'Content-Type': 'application/json',
'Authorization':"Basic "+accessToken
},
data: params,
url: "/api"+url,
success: function(res) {
console.log("response-post請求-新增", res);
if (res) {
if (res.statusCode == 200) {
console.log("res.data-post請求-新增", res.data);
console.log("res.data.data-post請求-新增", res.data.data);
if (res.data.flag == true) {
callbackFunction()
} else {
failCallback();
}
} else {
uni.showToast({
icon: "none",
title: "網路連結異常，操作失敗!\n" + res.errMsg
});
}
}
},
fail: function() {
console.log("resquest fail");
uni.showToast({
icon: "none",
title: "網路連結異常，操作失敗"
});
if (failCallback) {
failCallback();
}
}
});nignx配置
命令如下
先找到你伺服器什麼的nignx的配置檔案位置
一般來說
位置:cd /usr/local/nginx/cofig/sbin
關閉命令:(到/sbin目錄下執行)./nginx -s stop
開啟命令:(到/sbin目錄下執行)./nginx- 1
- 2
- 3
配置檔案的配置（和上面的相關的）
最後該專案即徹底部署完結