記錄-首個Nuxt項目

項目首頁

1628067909(1).jpg

項目描述:招聘網站(易展翅)css

預覽地址:new.izhanchi.com/html

項目安裝

運行 create-nuxt-app 確保安裝了npx(npx在NPM版本5.2.0默認安裝了)

npx create-nuxt-app <項目名>
or
yarn create nuxt-app <項目名>
複製代碼

個人選項配置:Element-UI、Axios、ESLintvue

1628070720(1).jpg

項目目錄

├── assets               未編譯的靜態資源如 css 和 圖片
    ── images            圖片資源
    ── style             css、scss 文件
├── components           組件,不會像頁面組件那樣有 asyncData 方法的特性
├── dataCommon           存放
├── layouts              佈局目錄 layouts 用於組織應用的佈局組件
    —— default           項目主佈局
    —— bingPhone         微信登陸綁定手機號佈局(主要是和主佈局不同)
├── middleware           用於存放應用的中間件
├── nuxt.config.js       用於組織Nuxt.js 應用的個性化配置,以便覆蓋默認配置
├── package.json         用於描述應用的依賴關係和對外暴露的腳本接口
├── pages                用於組織應用的路由及視圖
├── plugins              存放須要在根vue.js應用實例化以前須要運行的JS插件
├── static               用於存放應用的靜態文件(不會被webpack編譯處理)
├── store                應用的 Vuex 狀態樹
複製代碼

項目接口封裝 (Axios)

1628129269(1).jpg

問題彙總:

  • 網站的用戶中心登陸相關的接口與本站的接口地址是不相同的node

    do: 想到的是由於用戶中心接口很少,因此在請求攔截裏作處理切換接口代理。在請求用戶中心接口的時候傳多個「hosttype」字段來鑑別是不是用戶中心接口。webpack

    栗子:ios

// get 請求
   this.$axios.get('xxx',{
     params:{...}
     hosttype: 'uhost'
   })
   // post 請求
   this.$axios.post('xxx',data,{
     headers: {...},
     hosttype: 'uhost',
   })
複製代碼

登陸彈窗組件封裝

1628131469(1).jpg

1628133570(1).jpg

  • 思路:由於這個登陸並非跳頁面登陸而是彈窗。因此當時考慮把登陸作成全局組件,經過全局函數方法去調用組件。nginx

  • 註冊全局代碼web

1628131765(1).jpg
  • 判斷是否登陸彈出彈出

1628133274(1).jpg

問題彙總

  • 由於彈窗是由用戶主動觸發。因此沒放到服務器端而後就會出現組件內不存在 a x i o s axios, cookies,$store 等方法。vuex

    do: 想到的是由於全局組件是經過plugins文件插件的形式引入的。因此如上圖同樣經過傳參的形式‘ a x i o s , axios, cookies,$store傳到組件內(不知道還有沒有最優解,有待深究)。express

  • 微信二維碼登陸樣式修改

    do: 須要引入微信第三方插件生成二維碼,而後經過css-base64形式才能自定義二維碼樣式。

1628133200(1).jpg

  • 後端想經過登陸接口設置cookies不成功

    緣由:由於用戶中心的站點跟本站站點不一致。

    do: 在請求config裏添加 withCredentials參數並設爲true

    developer.mozilla.org/zh-CN/docs/…

withCredentials: true
複製代碼

頁面開發總結

  1. 業務組件和頁面created生命週期內不能用window對象,這歸咎與nuxt的生命週期機制。

1628152821(1).jpg

詳:紅色框的生命週期是運行在服務端的,黃色框的即運行在服務端又運行到客戶端。而window對象是客戶端纔有的。

  1. 避免在asyncData個別異步請求失敗致使服務端報錯,從而使得頁面不能正常展現。

    do: 給異步請求加上以下:

try {
   //在此運行代碼
}
catch (err) {
   //在此處理錯誤
}
複製代碼
  1. 項目中運用高德地圖
  • 安裝依賴
npm install vue-amap --save
複製代碼
  • 寫插件js,放到plugins目錄下
import Vue from 'vue'
    import VueAMap from 'vue-amap'
    Vue.use(VueAMap);

    VueAMap.initAMapApiLoader({
      key: 'xxxxxxx',
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'Geocoder', 'AMap.CitySearch']
    });
複製代碼
  • nuxt.config.js中添加該js
{ src: '@/plugins/vue-map', ssr: false },
複製代碼

詳:注意在nuxt.config.js中引入插件的時候ssr要設成false--由於高德地圖源碼裏存在widow對象操做dome。

注:在引用組件的時候用客戶端標籤包住,我猜是組件裏的生命週期使用了window對象。

注:若是同個頁面使用多張地圖記得 vid 要不一樣,不然沒法顯示。

eg:

<client-only>
        <div class="company-map">
          <el-amap vid="amap"
            :center="['116.46' ,'39.92']"
            class="amap-container"
            :zoom="16">
            <el-amap-marker
              :position="['116.46' ,'39.92']"
              :visible="true"
              :clickable="false" />
          </el-amap>
        </div>
     </client-only>
複製代碼

1628155837(1).jpg 4. 項目中使用vue-pdf預覽文件

  • 安裝依賴
npm install --save vue-pdf
複製代碼
  • 寫插件js,放到plugins目錄下
import Vue from 'vue'
    import pdf from 'vue-pdf'
    Vue.component('pdf', pdf)
複製代碼
  • nuxt.config.js中添加該js
{ src: '@/plugins/vue-pdf.js', ssr: false }
複製代碼

同時在nuxt.config.js該js不然引用了也會報錯。 1628156205(1).jpg

頁面引用:

<div v-for="i in numPages" :key="i">
      <pdf :src="pdfSrc" :page="i" style="width: 100%"></pdf>
    </div>
複製代碼
let pdf = require('vue-pdf')
      this.pdfSrc = pdf.default.createLoadingTask(this.url);
      // 加載pdf總頁數
      this.pdfSrc.then(pdf => {
        this.numPages = pdf.numPages;
      });
複製代碼

項目效果:

1628155958(1).jpg

  1. 首次打開頁面或者刷新頁面獲取定位。(需求要全局定位一次)

    do:在vuex的store文件中有個nuxtServerInit函數 這個函數會異步執行完才執行生命週期。

1628669640(1).jpg

項目部署

①服務器安裝pm2軟件(用於管理運行node項目)

wget ‐qO‐ https://getpm2.com/install.sh | bash
複製代碼

②安裝完成後,執行命令,爲咱們的 pm2 添加開機自啓動

pm2 startup systemd
    pm2 save
複製代碼

③執行以下命令,來使用 pm2 來啓動咱們的 express

pm2 start /home/node_project/socket/bin/www ‐‐name "項目名稱"
複製代碼

查看pm2管理的列表

pm2 list
複製代碼

④運行npm run build打包nuxt項目
而後將.nuxt、static、nuxt.config.js、package.json四個文件放到服務器目錄中。

1628157178(1).jpg

⑤服務器上運行npm install安裝依賴

npm install
複製代碼

⑥pm2託管項目

pm2 start npm ‐‐ start2pm2 start
    npm ‐‐name "my‐nuxt"‐‐ run starT
複製代碼

⑦訪問服務器連接。 pm2經常使用命令

  1. pm2 list # 查看當前正在運行的進程
  2. pm2 start all # 啓動全部應用
  3. pm2 restart all # 重啓全部應用
  4. pm2 stop all # 中止全部的應用程序
  5. pm2 delete all # 關閉並刪除全部應用
  6. pm2 logs # 控制檯顯示全部日誌
  7. pm2 start 0 # 啓動 id爲 0的指定應用程序
  8. pm2 restart 0 # 重啓 id爲 0的指定應用程序
  9. pm2 stop 0 # 中止 id爲 0的指定應用程序
  10. pm2 delete 0 # 刪除 id爲 0的指定應用程序
  11. pm2 logs 0 # 控制檯顯示編號爲0的日誌
  12. pm2 show 0 # 查看執行編號爲0的進程
  13. pm2 monit my-nuxt # 監控名稱爲my-nuxt的進程

問題總結

  1. 在版本迭代構建jenkins的期間會出現 nginx 404 致使服務器報錯。

    因:jekins構建時 會走pm2 restart 致使原有包丟失。

    do:

    1.構建時重啓應當使用pm2 reload 來重載

    2.pm2 支持fork與cluster啓動模式,生產環境中應用cluster方式啓動

    3.在nuxt項目根目錄添加ecosystem.config.js來配置pm2 1628669187(1).jpg

-- END --

相關文章
相關標籤/搜索