Nuxt.js project setup configuration step pit

The company project needed nuxt.js server rendering, so the official nuxt.js scaffolding was used to build the project, and some potholes were recorded here.

• Internet Explorer 9 adaptation problems

  IE9 is a big problem because it doesn’t support ES6 syntax and IE9 doesn’t know the history mode in routing, so my temporary solution here is as follows. Document > >

  // nuxt.config.js 
    /* ** Global router middleware */
    router: {
      mode: 'history'.middleware: 'global'.fallback: true 
    },
  Copy the code

  First, set fallback. I don’t know why I read the document. The most important thing is to set babel-Polyfill.

  yarn add babel-polyfill --dev
  Copy the code

  // plugin creates index.js under babel-polyfill
  import 'babel-polyfill'
  Copy the code

  // nuxt.config.js
    plugins: [
      { src: '@/plugins/babel-polyfill'.ssr: true } // Convert ES6 to ES5 compatible with IE9].Copy the code

  // Create a new.babelrc file in the document root directory
  {
    "presets": [["env",
        {
          "modules": false."useBuiltIns": "entry"}]."stage-3"]}Copy the code

  At this point, the project is up and running on IE9, and there may be some issues during development, which will be updated as we go.

• Introduction of global style variables and introduction of global styles

  Since the CSS precompiler used by the project at development time is SCSS, the global style variables registered are as follows.

  Start by installing the SCSS precompiler

  npm i node-sass sass-loader scss-loader --save-dev
  Copy the code

    // Configure styleResources in nuxt.config.js
    css: [
      {
        src: '~/assets/styles/index.scss'.lang: 'scss'}].modules: [
      // Doc: https://axios.nuxtjs.org/usage
      '@nuxtjs/axios'.'@nuxtjs/pwa'.'@nuxtjs/eslint-module'.'@nuxtjs/style-resources'].build: {
      transpile: [/^element-ui/].styleResources: {
        scss: './assets/styles/variable/index.scss'
      },
      /* ** You can extend webpack config here */
      extend(config, ctx) {}
    }
  Copy the code

• Vue globally injects function and attribute values

  Sometimes you want to use a function or attribute value throughout the application, and you need to inject them into a Vue instance (client), context (server), or even store(Vuex). By convention, new property or method names are prefixed with $.

  In fact, this official document has, but I will write it again to deepen my memory.

  Let’s say I want to use my interface path globally.

  // urls -> index.js (PS: always write in the plugins directory)
  
  import Vue from 'vue'
  import dev from './dev'
  import prod from './prod'
  // Determine whether the environment is production or development
  const env = process.env.NODE_ENV
  const serverIp = env === 'production' ? prod.prodIp : dev.devIp
  const interfacePORT =
    env === 'production'
      ? `${prod.prodInterfacePort}${
          prod.prodName === ' ' ? ' ' : '/' + prod.prodName
        }`
      : `${dev.devInterfacePort}${dev.devName === ' ' ? ' ' : '/' + dev.devName}`
  
  const serverUrl = 'http://' + serverIp + '/'
  const interfaceUrl = 'http://' + serverIp + ':' + interfacePORT + '/'
  
  // Inject the context and Vue at the same time, in Vue it is automatically preceded by $
  export default ({ app }, inject) => {
    inject('serverUrl', serverUrl)
    inject('interfaceUrl', interfaceUrl)
  }
  Copy the code

  // nuxt.config.js
    plugins: [
      { src: '@/config/url'.ssr: false }, // Global import of interface addresses].Copy the code

  It can then be introduced globally in the project

  export default {
    mounted(){
      console.log(this.$interfaceUrl)
    }
    asyncData(context){
      console.log(context.app.$interfaceUrl)
    }
  }
  Copy the code

• Vue global registry component

  First, create a *. Vue file, my file is called myView.vue, and register the component globally as follows.

  / / file directory for SRC/components/common/index. Js
  import MyViewer from './MyViewer'
  
  const globalCom = function(Vue) {
    if (globalCom.installed) return
    globalCom.installed = true
    Vue.component('MyViewer', MyViewer)
  }
  
  export default globalCom
  Copy the code

  Then create a folder called common-Components under the plugins directory in nuxt.js for registration in nuxt.config.js as follows.

  // The directory is SRC /plugins/common-components/index.js
  import Vue from 'vue'
  import globalCom from '@/components/common'
  Vue.use(globalCom)
  Copy the code

  Finally, reference it in nuxt.config.js as follows.

    /* ** Plugins to load before mounting the App */
    plugins: [
      { src: '@/plugins/common-components'.ssr: false } // Import global public components].Copy the code

Write this much for now and update as the project progresses.