年底初嘗nuxt2.x臨近年底，決定使用nuxtjs開發公司新項目。隨緣筆記分享

使用以前先擼遍官方文檔吧
【目前筆記是我開發工程中想起來時纔會記得】
【文末留微信，有問題能夠探討】

總體開發感覺

- 難度通常，不少問題看文檔或者百度均可以找到解決方法
- 坑較多，不必定什麼地方就會遇到不知道的問題

路由守衛

使用nuxt的middleware功能，中間件容許一個函數在每一個頁面進入以前運行
能夠在頁面中使用/能夠全局使用

// middleware/route.js
// 接收context做爲第一個參數
export default ({ route, redirect, app, store }) => {
  if (!store.state.userInfo.userId) {
    return redirect('/login')
  }
  if (route.fullPath === '/mine') {
    return redirect('/mine/account')
  }
}
// nuxt.config.js中配置
module.exports = {
    router: {
        middleware: 'route'
    }
}

自定義全局方法

用到nuxt中的plugins功能
nuxt在運行程序以前執行js插件（適用本身的庫或第三方模塊,修改plugin時須要重啓項目）
此處封裝localstorge操做 // 只容許mounted之中調用

// /plugins/utils.js
import Vue from 'vue'
const storge = {
  install(Vue) {
    /**
     * @params key setItem key
     * @params value setItem value
     * @params expire 過時時間<number> 默認7
     */
     
    Vue.prototype.$setStorge = (key, value, expire = 7) => {
      let obj = {
        value,
        time: Date.now(),
        expire: expire * 60 * 60 *24
      }
      localStorage && localStorage.setItem(key, JSON.stringify(obj))
    }
    
    Vue.prototype.$getStorge = (key) => {
      let val = localStorage.getItem(key)
      if (!val) return null
      val = JSON.parse(val)
      // 過時
      if ((Date.now() - val.time) > val.expire) {
        localStorage.removeItem(key)
        return null
      }
      return val.value
    }
    
    Vue.prototype.$delStorge = (key) => {
      localStorage.removeItem(key)
    }
  }
}
Vue.use(storge)

// nuxt.config.js中需配置plugins字段，參考middleware

nuxt中使用vuex

store目錄中新建user.js 直接暴露state等屬性
不使用模塊化，直接新建index.js 暴露

export const state = () => ({
  userInfo: null
})

export const mutations = {
  setUserInfo(state, data) {
    state.userInfo = data
  }
}
export default {
  state,
  // getters,
  // actions,
  mutations
}

服務端獲取數據

asyncData方法

• 頁面級組件中服務端纔會生效的鉤子
• 頁面刷新時不執行

• return出去的對象會放入到客戶端中的data數據中

  nuxtServerInit

  • 獲取服務端數據
  • 可訪問到服務端的context對象

  • nuxt會在每一次請求服務器頁面時執行，即：首次進入頁面或刷新頁面
        且只存在於vuex中的action對象中

export const actions = {
  nuxtServerInit({ commit }, { req }) {
    try {
      let cookies = req.headers['cookie']
      console.log(cookies)
    } catch (error) {
      console.log(error)
    }
  }
}

nuxt部署

• 服務端安裝工具node、yarn、pm2

curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash -
  sudo yum install -y nodejs
  sudo yum install yarn
  npm install -g pm2

• 本地nuxt項目代碼執行npm run build（.nuxt文件夾下會生成dist文件目錄）
• 把.nuxt、static、nuxt.config.js、package.json server五個文件夾拖到服務器上
• 服務器上npm install
• npm run start
• pm2 start npm --name "package.json文件中得name" -- run start

:::warning
第一次部署成功（項目中調用高德api報錯）
:::

第二次從新部署

- 引入高德的地方是直接在.vue文件中用了script標籤引入,
  改成了:
  export default {
    head: {
      script: [
        { src: '....' }
      ]
    }
  }
- Unexpected identifier // 意外的識別碼

(function (exports, require, module, __filename, __dirname) { import Modal from './confirm' })

// 不少說的是項目中缺乏識別import引入方式的babel
// 按照參考下載了也沒用

:::warning
找不到解決方法, 後來發現，iview的按需引入處的錯誤
package.json中的iview版本爲3.15也就是iview
而按需引入中的包名使用'iview'就會報錯
改成'view-design'解決
搞不懂
:::

"plugins": [
    ["import", {
      "libraryName": "view-design",
      "libraryDirectory": "src/components"
    }]
  ]

nginx部分配置

location / {
    proxy_pass http://localhost:3000;
  }

引入百度統計代碼

• 新建plugins/baidu.js

export default ({app: {router}, store}) => {
  /* 每次路由變動時進行pv統計 */
  router.afterEach((to, from) => {
    /* 告訴增長一個PV */
    try {
      window._hmt = window._hmt || []
      window._hmt.push(['_trackPageview', to.fullPath])
    } catch (e) {
    }
  })
}

• nuxt.config.js中配置script

  script: [
      { src: 'https://hm.baidu.com/hm.js?****' }
    ]

• nuxt.config.js中配置plugins字段

開啓https

nuxt.config.js中的server字段

const path = require('path')
  const fs = require('fs')

  module.exports = {
    server: {
      https: {
        // 此處路徑能夠直接寫死 讀取https證書文件
        // key: fs.readFileSync(path.resolve(__dirname, '**server.key'))
        key: fs.readFileSync('/usr/local/***.key')
      }
    }
  }

wx:L_k01derensheng