ionic項目打包+部署


環境

1、ionic

 

 2、angular-cli

 

 開發

1、CTRL C + CTRL V

2、圖片路徑的問題

使用‘assets/xxxxx.jpg’,而不使用‘../../assets/xxxxx.jpg’,因為打包后的目錄如下:

 

 服務器上圖片會報404錯誤。

3、打包問題   

打包命令: ionic build     打包完成后發現大小30M,我的媽呀,這肯定不行

生產版本:ionic bulid --prod    大小減少很多

4、打包完成之后,可以先本地跑一下,nginx for windows不錯的選擇

打包完成的文件全部拖到niginx/html 目錄下

 

點擊nginx.exe啟動服務

 

 然后打開網頁訪問localhost看看。

5、但是刷新頁面會404,至於什么原因網上可以查閱到。

解決:

app.module.ts  替換

import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 providers: [
    StatusBar,
    SplashScreen,
    { provide: LocationStrategy, useClass: HashLocationStrategy}
  ],
這樣開發的功能基本算是完成了,就可以進行部署了。
 
部署
1、安裝nginx
--  cat /proc/version   查看系統   ubuntu

 分清楚系統之后就可以安裝nginx了。

2.apt-get

-- sudo apt-get install nginx

過程會讓選一個Y同意占用內存。

3.如果出現無法定位nginx包,進行如下操作:

-- sudo apt-get update

4.更新完成之后,安裝nginx

 -- sudo apt-get install nginx 

5、配置conf

安裝完成后的目錄是 /etc/nginx

 

 進入conf.d

 

 新建一個文件作為配置文件,名字隨意,我已經新建好了,看一下文件內容參考一下即可

 

 幾個修改的地方,默認的端口號;訪問的名字ip/域名; 指向的文件目錄,試一下就知道了。 

服務器不同可能還需要開端口權限,防火牆等。

訪問成功:

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM