博客迁移nuxt2（二）创建项目及项目基础配置

_芋头丶
1,128 阅读2分钟

创建项目

确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）：

$ npx create-nuxt-app <项目名>

或者用 yarn ：

yarn create nuxt-app <项目名>

运行后选择一些基础配置，参考官网www.nuxtjs.cn/guide/insta…

使用scss或者less

安装sass-loader和node-sas，注意会有版本问题，所以我选择一个确保没问题的版本

npm install -D sass-loader@7.3.11 node-sass@4.13.1

安装之后就可以在vue文件中使用scss语法

配置别名

在nuxt.config.js中添加

//build 下面加一个extend
  build: {
    transpile: [/^element-ui/],
    extend(config, ctx) {
      config.resolve.alias.components = path.resolve(__dirname, 'components')
      config.resolve.alias.service = path.resolve(__dirname, 'scripts/services')
      config.resolve.alias.api = path.resolve(
        __dirname,
        'scripts/common/api/api'
      )
    },
 
  },

配置环境变量

安装cross-env

npm install -S cross-env

然后修改启动命令

  "dev": "cross-env NODE_ENV=dev nuxt",
  "build": "cross-env NODE_ENV=pro nuxt build",

然后在项目根目录下创建一个env.js文件

module.exports = {
  // 开发环境
  dev: {
    NODE_ENV: 'development2',
    BASE_API: '/api', // 开发服务器地址
  },

  // 生产环境
  pro: {
    NODE_ENV: 'production',
    BASE_API: '//api.xxx.com', // 正式服务器地址
  },
}

nuxt.config.js中加入如下代码

  env: {
    baseUrl: env[process.env.NODE_ENV].BASE_API,
    NODE_ENV: env[process.env.NODE_ENV].NODE_ENV,
  },

其他地方就可以调用了

const BASE_URL = process.env.baseUrl

配置跨域

此时请求接口会报跨域的错误，这里的配置其实跟vue-cli里面一样，只是下载一个nuxt的插件

npm install -D @nuxtjs/proxy

然后在nuxt.config.js中

 modules: [
    '@nuxtjs/axios',//nuxt自带的axios，可选
    '@nuxtjs/proxy',
  ],
 proxy: {
    '/api/': {
      target: 'http://localhost:3000/',
      pathRewrite: {
        '^/api/': '',
      },
    },
  },

此时使用axios请求不会出现跨域了，但是在asyncData中使用axios会出问题

配置axios

使用@nuxt/axios

npm install -S @nuxt/axios

若选择使用nuxt/axios的话，就不会出现问题，如果要对nuxt/axios进行个性化配置的话就需要插件化

//nuxt.config.js中配置插件
plugins: [
    '~/plugins/axios'
  ]

扩展axios

export default function ({ $axios, redirect }) {
  $axios.onRequest(config => {
    console.log('Making request to ' + config.url)
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}

在vue中使用

async asyncData({ app }) {
  const ip = await app.$axios.$get('http://icanhazip.com')
  return { ip }
}

methods: {
  async fetchSomething() {
    const ip = await this.$axios.$get('http://icanhazip.com')
    this.ip = ip
  }
}

async nuxtServerInit ({ commit }, { app }) {
  const ip = await app.$axios.$get('http://icanhazip.com')
  commit('SET_IP', ip)
}

// In store
{
  actions: {
    async getIP ({ commit }) {
      const ip = await this.$axios.$get('http://icanhazip.com')
      commit('SET_IP', ip)
    }
  }
}

更详细的可以看官方www.axios-js.com/zh-cn/docs/…

使用原始axios

安装

npm install -S axios

使用方法和平常一样，但是在asyncData中使用时会报错 因为使用了过滤器对response做出来，这里response大概率会为undefined，所以会报错

Cannot read property 'status' of undefined

这时候把过滤器注释掉，再请求一遍，会发现报错不一样了

connect ECONNREFUSED 127.0.0.1:80           
  at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1148:16)

原因是当使用asyncData方法在组件渲染前异步请求数据时，node url parse 去解析你的这个 /api 参数的，然后再传给相应的如 http request所以默认就是80端口

换句话说 asyncData方法异步请求数据时，以为/api/${params.id}这个接口的网址是　127.0.0.1:80, 所以将请求发送给了127.0.0.1:80，而我的接口服务器并没有跑在80端口上，所以报错。

解决方法有三种： 一、将nuxt的端口改成80（推荐）更正一下：这种方式适合开发环境使用，因为线上80端口会被nginx占用，做个环境变量的判断就行

//nuxt.config.js中
 server: {
    port: process.env.NODE_ENV === 'dev' ? 80 : 8888,
    host: '0.0.0.0',
  },

二、将接口的服务器端口改为80

三、将接口的url写全

将上面配置的环境变量改成,原理是直接指定接口url，nuxt就会做转发，不会产生跨域问题

 dev: {
    NODE_ENV: 'development',
    BASE_API: 'http://localhost:3000', // 开发服务器地址
  },

但这样的话要注意axios的配置中是否有些用到这个BASE_API做为axios的BASE_URL 如果有的话要注意做一下区分，可以加一个环境变量

 dev: {
    NODE_ENV: 'development',
    BASE_API: 'http://localhost:3000', // 开发服务器地址
    PROXY_API: '/api', //
  },

比如asyncData里面调用的话就用BASE_API,非asyncData的话就用PROXY_API。不过这样就有点多此一举的感觉了

avatar
文章
阅读
粉丝