Nuxt.js項目搭建配置踩坑

公司項目須要用到nuxt.js的服務端渲染，因此使用了nuxt.js官方的腳手架搭建了項目，在這兒記錄一些搭建過程當中踩過的坑。

• IE9的適配問題

  IE9是一個老大難的問題，由於它不支持ES6的語法，並且ie9也不知路由中的history模式，因此我在這兒暫時的解決辦法以下。文檔>>

  // nuxt.config.js 
    /* ** Global router middleware */
    router: {
      mode: 'history',
      middleware: 'global',
      fallback: true 
    },
  複製代碼

  先在設置一下fallback，具體不知道爲何看文檔，最重要的是設置babel-polyfill。

  yarn add babel-polyfill --dev
  複製代碼

  // plugin 下 新建babel-polyfill文檔下的index.js
  import 'babel-polyfill'
  複製代碼

  // nuxt.config.js
    plugins: [
      { src: '@/plugins/babel-polyfill', ssr: true } // 將es6轉換爲es5 兼容ie9
    ],
  複製代碼

  // 在文檔根目錄下新建 .babelrc 文件
  {
    "presets": [
      [
        "env",
        {
          "modules": false,
          "useBuiltIns": "entry"
        }
      ],
      "stage-3"
    ]
  }
  複製代碼

  至此，項目就能在ie9上運行起來了，可能開發中還會有問題，到時候會進行補充。

• 全局樣式變量的引入和全局樣式的引入

  由於開發時項目使用的css預編譯器是scss，因此註冊全局的樣式變量以下。

  先安裝scss預編譯器

  npm i node-sass sass-loader scss-loader --save-dev
  複製代碼

  // nuxt.config.js 中配置 styleResources
    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) {}
    }
  複製代碼

• Vue 全局注入函數和屬性值

  有時您但願在整個應用程序中使用某個函數或屬性值，此時，你須要將它們注入到Vue實例（客戶端），context（服務器端）甚至 store(Vuex)。按照慣例，新增的屬性或方法名使用$做爲前綴。

  其實這個官方文檔有，可是我仍是再寫一遍加深一遍記憶。

  好比說我想全局使用我定義的接口路徑。

  // urls -> index.js (PS:必定要寫在plugins文件目錄下)
  
  import Vue from 'vue'
  import dev from './dev'
  import prod from './prod'
  // 判斷是生產環境仍是開發環境
  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 + '/'
  
  // 同時注入context 和 Vue中，在Vue中會自動加上在前面加上$ 
  export default ({ app }, inject) => {
    inject('serverUrl', serverUrl)
    inject('interfaceUrl', interfaceUrl)
  }
  複製代碼

  // nuxt.config.js
    plugins: [
      { src: '@/config/url', ssr: false }, // 接口地址的全局引入
    ],
  複製代碼

  而後就能夠在項目中全局引入

  export default {
    mounted(){
      console.log(this.$interfaceUrl)
    }
    asyncData(context){
      console.log(context.app.$interfaceUrl)
    }
  }
  複製代碼

• Vue 全局註冊組件

  ​ 首先，先建立一個*.vue文件，個人文件名叫MyViewer.vue，而後在全局註冊這個組件，代碼以下。

  // 文件目錄爲 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
  複製代碼

  ​ 而後，在nuxt.js中的plugins文件目錄下建立文件夾common-components用於在nuxt.config.js中註冊，代碼以下。

  // 文件目錄爲 src/plugins/common-components/index.js
  import Vue from 'vue'
  import globalCom from '@/components/common'
  Vue.use(globalCom)
  複製代碼

  ​ 最後，在nuxt.config.js中引用它，代碼以下。

  /* ** Plugins to load before mounting the App * 在這裏註冊插件 */
    plugins: [
      { src: '@/plugins/common-components', ssr: false } // 引入全局公共組件
    ],
  複製代碼

先寫這麼多，之後隨着項目進度繼續更新。