Nuxt.js 使用中遇到的那些事

一、服务启动

1. 创建应用并启动

为了便于大家快速使用，Nuxt.js提供了一个 starter 模板。

下载模板的压缩包 或利用 vue-cli 安装使用：

$ vue init nuxt-community/starter-template 

如果 Vue CLI 没有安装, 需先通过 npm install -g @vue/cli @vue/cli-init 来安装。

然后安装依赖包：

$ cd 
$ npm install

接着通过以下命令启动项目：

$ npm run dev

应用现在运行在 http://localhost:3000

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 }
  }

 如果axios 已经封装过可以直接在配置中修改 baseUrl: "http://192.168.11.212/api"