升級 nuxt 2.12 至 2.14

新增功能設定

nuxt.config.js

  // 允不允許 nuxt team 收集錯誤報告
  telemetry: false,
  // 存取 content 資料夾內的檔案，當作資料庫使用查詢
  content: false,
  // 元件自動載入功能，2.13版本後新增
  components: true,
  // runtime config 可無視打包環境(nuxt build)，在 nuxt start 時載入環境檔
  publicRuntimeConfig: {
    TRON_PLUGIN_SITE: process.env.TRON_PLUGIN_SITE,
    TRON_NETWORK_NODE: process.env.TRON_NETWORK_NODE
  },
  privateRuntimeConfig: {}

content, telemetry

設定 false即可，因為目前沒有用到

components 自動載入元件設定

在升級前使用元件(component)需要寫import指令

import Footer from '~/components/Footer'
import NavbarFooter from '~/components/NavbarFooter'

<template>
  <footer />
  <navbar-footer />
</template>

升級後使用時就像使用全域元件一樣，不需再寫import指令

<template>
  <footer />
  <navbar-footer />
</template>

引入元件這部分不需要把原本有寫的import刪掉，保留就好

新增的元件，你只需要會依照檔名稱寫對應的html TAG 就好，詳細請參考官網

Runtime config 執行時環境參數

需修改nuxt.config.js設定檔，新增publicRuntimeConfig項目，並將.env裡的變數新增到項目裡

nuxt.config.js

  publicRuntimeConfig: {
    TRON_PLUGIN_SITE: process.env.TRON_PLUGIN_SITE,
    TRON_NETWORK_NODE: process.env.TRON_NETWORK_NODE
  },
  // 目前不會用到，只有在server端才能使用，client存取不到
  privateRuntimeConfig: {}

移除 @nuxtjs/dotenv 模組，與dotenvFilename變數

nuxt.config.js

  modules:[
    // '@nuxtjs/dotenv'
  ],
  // dotenv: {
  //   filename: dotenvFilename
  // }

並將散佈在專案內所有的process.env.{變數}改成$config.{變數}或this.$config.{變數}

components/Footer.vuedata(){
  return {
    imageHost: process.env.STRAPI_URL
  }
}
components/Footer.vuedata(){
  return {
    imageHost: this.$config.STRAPI_URL
  }
}

plugins/i18n.jsexport default function ({app, $axios}){
  const langApiHost =  process.env.LANG_URL
}
plugins/i18n.jsexport default function ({app, $axios, $config}){
  const langApiHost = $config.LANG_URL
}

修改npm執行命令，將--dotenv .env.{環境}代入

package.json

"script": {
  "dev": "node createI18nFiles.js && nuxt --dotenv .env.staging",
  "build": "node createI18nFiles.js && nuxt build --dotenv .env",
  "build:staging": "node createI18nFiles.js && nuxt build --dotenv .env.staging",
  "build:uat": "node createI18nFiles.js && nuxt build --dotenv .env.uat",
  "build:production": "node createI18nFiles.js && nuxt build --dotenv .env.production",
  "start": "nuxt start --dotenv .env",
  "start:staging": "nuxt start --dotenv .env.staging",
  "start:uat": "nuxt start --dotenv .env.uat",
  "start:production": "nuxt start --dotenv .env.production",
}

修改ci/cd環境參數

Dockerfile

# Build app
RUN npm run build:{{env}}

# start command
CMD [ "npm", "run", "start:{{env}}" ]