Nuxt.js相关问题

1. 全局注册一个方法（函数） 三步搞定

　　在plugins文件夹下新建一个js，如test.js 然后在里面写入如下

/**
 *  写你要的方法名
 *  然后注册进Vue
 */
import Vue from 'vue'
var test= {
    install(Vue){
        Vue.prototype.test = (val) => { // val为参数值，不用则不写
                return 'test' // 写你自己的逻辑
        };
    }
}
Vue.use(test);

　　然后在nuxt.config.js文件中plugins引入

plugins: [
    { src: "~/plugins/test.js", ssr: true }
 ],

　　在需要的地方直接调用test(val)就好了

2. 在Nuxt项目中使用Vant的时间选择器，出现Invalid prop: type check failed for prop "maxDate". Expected Date, got Date 错误。大致就是查找不到类型，类型失效。

　　主要是因为SSR服务端渲染导致的类型校验，需要把时间选择器包在no-ssr标签中，如下

     <no-ssr>
        <van-datetime-picker
          class="picker-date"
          v-model="currentDate"
          :min-date="minDate"
          :max-date="maxDate"
          type="date"
          @cancel="showPicker = false"
        />
      </no-ssr>

 

3. 在配置webpack环境结合Node进行打包项目的时候，怎么自定义指令和环境指向？修改NODE_ENV？

第一步：先在package.json中配置scripts的指令，Demo如下：其中MODE就是自定义的值，代表NODE_ENV

    "dev": "cross-env MODE=dev nuxt",
    "build:test": "cross-env MODE=test nuxt build",
    "build:analyze": "nuxt build --analyze",
    "start": "nuxt start",

第二步：在nuxt.config.js中的env配置环境变量，Demo如下：MODE对应上面的值

/**
   * 环境变量配置
   */
  env:{
    NODE_ENV: process.env.NODE_ENV,
    MODE: process.env.MODE,
  }, 

第三步：在你需要设置对应不同值进行不同环境build的地方写入，Demo是在config.default.js中写入，如下：

  if (process.env.MODE == "dev") {
    // 本地启动环境配置
      return ENVIRONMENT_TEST;
      // return ENVIRONMENT_DEFAULT;
  } else if (process.env.MODE == "test") {
      // 测试环境配置
      return ENVIRONMENT_TEST;
  } else if (process.env.MODE == "production") {
    // 生产环境配置
    return ENVIRONMENT_DEFAULT;
  } else {
    return ENVIRONMENT_DEFAULT;
  }