一、服務啟動

1. 建立應用並啟動

為了便於大家快速使用，Nuxt.js提供了一個 starter 模板。

下載模板的壓縮包 或利用 vue-cli 安裝使用：

$ vue init nuxt-community/starter-template <project-name>

如果 Vue CLI 沒有安裝, 需先通過 npm install -g @vue/cli @vue/cli-init 來安裝。

然後安裝依賴包：

$ cd <project-name>
$ npm install

接著通過以下命令啟動專案：

$ npm run dev

2.  更改應用 host（主機） / port（埠） 配置

       在package.json檔案中新增配置資訊

 "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "3333"
    }
  }

說明：config新增的位置和 scripts/name 是同級, 位置不可出錯，否側不生效 

3.  服務代理配置

1. npm install  @nuxtjs/proxy --save-dev 按裝依賴
2. 在檔案nuxt.config.js 中新增modules、proxy配置資訊如下：

module.exports = {
  modules: [
    // 代理模組
    '@nuxtjs/proxy'
  ],
  // 介面代理配置項
  proxy: [
    [
      '/api', {
        target: 'https://192.168.11.151',
        secure: false,  // 如果是https介面，需要配置這個引數
        changeOrigin: true, // 如果介面跨域，需要進行這個引數配置
      }
    ],
    []
  ]
}
 

 介面非https時 secure: false 配置資訊需要註釋掉

4. scss前處理器使用配置

1. npm install node-sass sass-loader --save-dev
2. 在檔案nuxt.config.js 中新增css配置項資訊如下：

 css: [
    // SCSS file in the project
    'styles/index.scss'
    'styles/variables.scss'
  ]

 說明：新增scss檔案路徑，styles為自己新建的資料夾名，實際請根據自己的scss檔案路勁引入

二、應用開發 

1. 本地開發 NuxtServerError connect ECONNREFUSED 127.0.0.1:80 錯誤解決

原因：普通方式請求介面可以正常獲取資料，使用asyncData/fetch方式獲取資料時介面代理未成功轉發

// 介面代理配置 
proxy: [
    [
      '/api', {
        target: 'http://192.168.11.212',
        // secure: false,  // 如果是https介面，需要配置這個引數
      }
    ]
  ]

解決方式：asyncData/fetch方法呼叫的介面使用完整路徑 ip地址（域名） + 埠

 async asyncData () {
    let {data} = await axios.get('http://192.168.11.212/api/article/getFrontArticleList')
    console.log(data)
    return { users: data.data }
  }