個人也是了百度了挺久的了,花費的時間( 倆個半小時 )
uniapp 的打包首先要先配置,配置好了才能去進行打包,如圖所示。 這只是第一步。
注意:
1.執行基礎路徑最好用 ./ ,如果配置了其他請自行新增路徑。
2.由於uniapp 的特性,所以導致了不支援 history 模式,只能支援 hash 模式( 路徑會帶 # )
3.千萬千萬不能勾選搖樹優化( 如果專案引用了其他元件,則會報錯 node模組找不到元件,實際上是由於搖樹優化,裁剪了一部分沒有使用的元件,導致 node模組的缺失 )
上面只是第一步,第二步的配置來了。
1. pubilcPath 的路徑要和上圖的執行基礎路徑一致,這是第一點。
2.disableHostCheck 要設定為true( 禁止訪問本地host檔案 )
3.router 的base,最好設定為 ./ ( 一致化,本人沒有試過使用加了其他的會不會產生什麼變化 )
4. domain 是伺服器的地址,記得改為自己的本地地址或者是伺服器的地址
5.看了下面的圖之後會附上程式碼,可以複製貼上。
"template" : "",
"domain" : "192.168.0.74",
"router" : {
"mode" : "hash",
"base" : "./"
},
"publicPath" : "./",
"devServer" : {
"disableHostCheck" : true, //禁止訪問本地host檔案 // "https" : true,
// "port" : 8080,
"proxy" : {
"/api" : {
"target" : "http://192.168.0.202:8080", //這裡使用後端伺服器的地址
"changeOrigin" : true, //是否跨域
"secure" : true, // 是否支援 https 協議的代理
"pathRewrite" : {
"^/api" : ""
}
}
},
"port" : 8080,
"https" : true
},
以上配置完成之後,就能進行打包了。
按圖索驥即可完成
找到 H5的打包
輸入網址標題以及伺服器名字( 本地 nginx 則用本地地址 ),然後選擇 發行就會進行打包
打完之後會出現這張圖,出現選中部分就是打包成功,可以進行部署。
找到你的專案路徑,找到這個打包之後的資料夾。例下圖( 這個H5就是你要用的東西,整個檔案裡的內容都是。 )
本地nginx的部署:
1.找到你的 nginx (個人版本:1.18.0 )
2.在你的 nginx 根目錄下建立一個資料夾,例如下圖。
3.可以把名字( admin )換成你想要的任何一個名字,然後開啟它。把剛剛打包完的H5資料夾,丟進來。
接下來開始配置 nginx 的路徑了。
1.首先找到conf資料夾
2.其次點選進去,找到nginx.conf 檔案,開啟它
找到 server 這一個物件
注意: 這裡的埠必須和前面打包之前設定的埠一樣,不然會找不到。
location 物件裡的 root ,就是連線你剛剛在伺服器底下建立的資料夾名字, 連線上 /h5/ 則是為了和其他路徑區分開來
server {
listen 8080;
server_name 192.168.0.74; # 配置根目錄的地址是以 nginx 下的 html 資料夾為根目錄來查詢的
#root html; #charset koi8-r; #access_log logs/host.access.log main; location / {
root html;
index index.html index.html;
} # 配置我們的 admin 的前臺服務 比如 47.105.134.120:8080/admin/index.html
location ^~ /h5/ {
# 處理 Vue 單頁面應用 路由模式為 history 模式重新整理頁面 404 的問題
root admin;
autoindex on;
autoindex_exact_size on;
autoindex_localtime on;
} #error_page 404 /404.html; # redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
} # proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#} # deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
選擇性複製貼上即可,內容解釋的很清楚了。
最後,我們來學幾條命令,用於啟動 nginx
1. start nginx ( 首次啟動的命令 )
2.nginx -s reload ( 更新配置之後啟動的命令 )
3.nginx -s stop( 停止nginx,關閉server 的命令 )
最後就可以直接開啟訪問了。( nginx 配置的 location 後面連線的 /h5/ 就是連線在這裡的,如果不連線上去,會報錯404 )
如果連線上去了還報錯,檢查路徑是否寫錯。 如果按照我的圖和我的程式碼來的話,是可以直達的哦親。
例如:http://192.168.0.74:8080/h5/ ( 這樣會跳轉到你程式碼設定的預設首頁 ),如圖所示:
最後,附上一位可愛的小姐姐寫的原創部落格,她的內容給了我蠻大的幫助。
所以我也寫了一遍,內容比較詳細,按圖索驥即可。
在此 @祈澈菇涼 ,希望可以多多指教。
https://wangxiaoting.blog.csdn.net/article/details/107176967?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.control