nuxtjs 2+ 版本使用问题总结

如何使用rem布局

nuxt.config.js中

const remjs = 'var html = document.getElementsByTagName("html")[0];var oWidth = window.innerWidth;html.style.fontSize = oWidth/ 1920* 100 + "px";'
head: {
    title: '银罗首页',
    htmlAttrs: {
      lang: 'zh-cn'
    },
    meta: [
      {charset: 'utf-8'},
      {name: 'viewport', content: 'width=device-width, initial-scale=1'},
      {hid: 'description', name: 'description', content: ''},
      {name: 'format-detection', content: 'telephone=no'}
    ],
    link: [
      {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
      {rel: 'stylesheet', type: 'text/css', href: '/css/reset.css'},
      {rel: 'stylesheet', type: 'text/css', href: '/css/common.css'},
    ],
	//rem使用
    script: [
      {innerHTML: remjs, type: 'text/javascript', charset: 'utf-8'},
    ],
    __dangerouslyDisableSanitizers: ['script']
  },

跳转出现跨域问题

• 上线中遇到的问题，开发中却正常（费解）

//下载代理插件
npm install --save-dev @gauseen/nuxt-proxy
OR
yarn add --save-dev @gauseen/nuxt-proxy

//配置
modules: [
    '@nuxtjs/axios',
    '@gauseen/nuxt-proxy'
  ],
   axios: {
    prefix: '/api',
    proxy: true,
    baseURL: "接口地址",
  },
  proxyTable: {
    '/api': {
      target: '接口地址',
      pathRewrite: {
        '^/api/': '/',
      },
      changeOrigin: true,
    },
  },

使用公共方法或者变量

//配置
 plugins: [
    '@/plugins/element-ui',
    '@/plugins/global'
  ],
  //asyncData中访问
  Vue.prototype.tools.removeNullItem(data1)
  //其他位置中访问
  this.tools.removeNullItem(data1)

例如：plugins文件下创建global.js

import Vue from 'vue'
/*公共方法和属性*/
const tools = {
  install(Vue) {
    Vue.prototype.tools = {
      requests() {
        console.log(333);
      },
      //对象为空数据过滤
      isEmptyObj(o) {
        for(var attr in o) return !1;
        return !0;
      },

    }
  }
}

Vue.use(tools)
//asyncData函数内不能使用this,所以。。。
Vue.prototype.$tools = tools

asyncData方法使用案例

async asyncData({query, $axios}) {
    let rowsList = [
      {label: '机构类型', activeIi: 0, select: [{name: '不限'}, {name: '银行'}, {name: '消费金融'}, {name: '小额贷款'}, {name: '担保公司'}, {name: '贷款代办'}, {name: '其他'}]},
      {label: '经营贷款', activeIi: 0, select: [{name: '不限'}, {name: '信用贷款'}, {name: '房产抵押'}, {name: '汽车抵押'}, {name: '企业贷款'}, {name: '担保贷款'}, {name: '其他'}]},

    ]
    let keywords = query.keywords
    let sort = query.sort ? Number(query.sort) : 1
    let pageNum = query.pageNum ? Number(query.pageNum) : 0
    let activeIi = query.activeIi ? Number(query.activeIi) : 0
    let selected1 = query.selected1 ? Number(query.selected1) : 0
    let selected2 = query.selected2 ? Number(query.selected2) : 0
    rowsList[0].activeIi = selected1
    rowsList[1].activeIi = selected2
    let data = {
      pageSize: 10, pageNum: 0,
    }
    let data1 = {
      pageSize: 10,
      pageNum: pageNum,
      type: selected1 == 0 ? '' : selected1,/*类型*/
      operatingLoan: selected2 == 0 ? '' : selected2,/*贷款*/
      sort: sort,/*排序*/
      companyName: keywords
    }
    console.log(data1);
    Vue.prototype.tools.removeNullItem(data1)
    let [mechanismlist, newlist, questionlist] = await Promise.all([
      $axios.$post(`/mechanismlist/list`, data1),
      $axios.$post(`/newlist/list`, {...data, classification: 2,}),
      $axios.$post(`/questionlist/list`, data),

    ]);
    return {
      total: mechanismlist.total,
      institutionList: mechanismlist.result || [],
      listlink: newlist.result || [],
      listQA: questionlist.result || [],
      keywords: keywords,
      activeIi: activeIi,
      rowsList: rowsList,
      selected1: selected1,
      selected2: selected2,
      sort: sort,
    }
  },

SEO优化

  scrollToTop: true,//是否滚动到页面顶部
  head() {
    return {
      title: this.title,
      meta: [
        {
          name: "description",
          content: this.description,
        },
        {
          name: "Keywords",
          content: this.keyword111,
        },
      ],
    };
  },

监听页面参数

• 监听到页面参数变化，自动更新asyncData

//监听所有
watchQuery: true,
//监听单个
watchQuery: ['name','age'],/*监听*/

构建部署

.nuxt文件
static文件
nuxt.config.js文件
package.json文件

文件缓存问题

//从静态路由转为动态路由_id后
部署时需要删除pages文件重新构建，否则会有文件缓存问题
导致诸多问题
例如：
服务端接口被调用两次，即便删除也无用，导致页面报错；
/detail?productId=undefind
/detail?productId=12345

配置loading加载条

loading: {
    color: 'rgba(255,146,0,.6)',
    height: '2px',
    failedColor: 'red',
    // css: false,
  },