Read through the official documentation before using it

Many parts of the problem, can be found on the Internet, so the overall development is smooth, the difficulty is general, the following record of my project used and summarized some knowledge, there are new problems will be updated, welcome to discuss!

Routing guard

Using Nuxt’s Middleware capabilities, middleware allows a function to run before each page is entered to be used within the page/globally

// middleware/route.js
// Take context as the first argument
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'}}Copy the code

Custom global methods

Plugins in NUxT are used to execute the plugins in nuxT before running the program. The plugins in NUxT are used to execute the plugins in NUxT before running the program

// /plugins/utils.js
import Vue from 'vue'
const storge = {
  install(Vue) {
    /** * @params key setItem key * @params value setItem value * @params expire expire time 
      
        Default 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)
      / / overdue
      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)

// See the plugins field in nuxt.config.js to configure middleware
Copy the code

Vuex is used in nuXT

Create user.js in store directory to expose state and other properties. Do not use modularity, create index.js directly to expose properties

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

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

The server obtains data

AsyncData methodCopy the code
  • A hook that takes effect on the server side of a page-level component
  • Not executed when the page is refreshed
  • The returned object is put into the data in the client
nuxtServerInit
Copy the code
  • Obtain server data
  • Context objects can be accessed on the server
  • It only exists in VUex

Nuxt is executed every time the server page is requested, that is, the first time the page is entered or refreshed, and only exists in the Action object in VUEX

// VuEX records obtain cookies to record login status
export const actions = {
  nuxtServerInit({ commit }, { req }) {
    try {
      let cookies = req.headers['cookie']
      console.log(cookies)
    } catch (error) {
      console.log(error)
    }
  }
}
Copy the code

Page or global reference script links

Component or nuxtconfigjs
export default {
    head: {
        script: [{src: '* * *'}}}]Copy the code

Dynamically set page title and meta information

export default {
    head() {
        return {
            title: '* * *', meta: {hid: 'description'.name: 'description'.content: '* * *'}}}}Copy the code

Nuxt deployment

  • Server installation tools Node, YARN, and 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 pm2Copy the code
  • NPM run build (.nuxt generates dist)
  • Drag the. Nuxt, static, nuxt.config.js, package.json server folders onto the server
  • The installation on the server depends on NPM install
  • Start the project NPM Run start
  • Pm2 start NPM –name “package.json “– run start

An error occurred during the first deployment

- Unexpected identifier // Unexpected identifier

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

// A lot is said about the lack of Babel in the project that recognizes how imports are introduced
// Download it according to the reference
// Can not find a solution, later found, iView on demand import error
// The version of iView in package.json is 3.15 (iView)
// An error will be reported if the package name imported on demand is 'iview'
// Change to 'view-design'
Copy the code
  "plugins": [["import", {
      "libraryName": "view-design"."libraryDirectory": "src/components"}]]Copy the code

Nginx partial configuration

  location / {
    proxy_pass http://localhost:3000;
  }
Copy the code

Introduce baidu statistical code

  • New plugins/baidu. Js
export default ({app: {router}, store}) => {
  /* Pv statistics are collected every time a route changes */
  router.afterEach((to, from) = > {
    /* tells you to add a PV */
    try {
      window._hmt = window._hmt || []
      window._hmt.push(['_trackPageview', to.fullPath])
    } catch (e) {
    }
  })
}
Copy the code
script: [
  { src: 'https://hm.baidu.com/hm.js?****'}]Copy the code
  • Configure the plugins field in nuxt.config.js

Open the HTTPS

The server field in nuxt.config.js

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

  module.exports = {
    server: {
      https: {
        // The path can be written to read the HTTPS certificate file
        // key: fs.readFileSync(path.resolve(__dirname, '**server.key'))
        key: fs.readFileSync('/usr/local/***.key')}}}Copy the code
Many of the above are personal use of official documents and online to find, please correct the shortcomings.