Nuxt笔记

配置

环境变量

1. package.json

在package.json文件中，可以通过命令指定环境变量，必须以 NUXT_ENV_ 开头，在服务端与前端均可读到此变量

//package.json
"scripts": {
  "dev:env": "SET NUXT_ENV_COOL_WORD=freezing & nuxt",
}

//nuxt.config.js
console.log(process.env.NUXT_ENV_COOL_WORD)

//vue
export default {
  created () {
    console.log(process.env.NUXT_ENV_COOL_WORD)
  },
  methods: {
    getEnv () {
      console.log(process.env.NUXT_ENV_COOL_WORD)
    }
  }
}

2. nuxt.config.js

通过env指定

//nuxt.config.js
export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:1102'
  }
}

//vue
export default {
  created () {
    console.log(process.env.baseUrl)
  },
  methods: {
    getEnv () {
      console.log(process.env.baseUrl)
    }
  }
}

3. .env文件

在根目录下新建.env文件，其中的值会在后端被获取，但并不能在前端获取

#.env
ENV = 'development'
BASE_URL = '/dev-api'

//nuxt.config.js
console.log(process.env.ENV) // development
export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:1102'
  },
}

//vue
export default {
  name: 'IndexPage',
  created () {
    console.log(process.env.ENV) // 服务端输出development，前端输出undefined
  },
  methods: {
    getEnv () {
      console.log(process.env.ENV) // undefined
      console.log(process.env.baseUrl) // /dev-api
    }
  }
}

可以通过命令指定不同开发环境下的文件：

#.env.dev
ENV = 'dev'
BASE_URL = '/dev-api'

#.env.prod
ENV = 'prod'
BASE_URL = 'http://localhost:1102'

// package.json
"scripts": {
  "dev": "nuxt --dotenv .env.dev",
  "dev:prod": "nuxt --dotenv .env.prod"
}

4. publicRuntimeConfig

通过指定publicRuntimeConfig，服务端和前端都可获取到值

//nuxt.config.js
export default {
  publicRuntimeConfig: {
    host: 'host'
  }
}

//vue
export default {
  created () {
    console.log(this.$config.host) // host
  },
  methods: {
    getEnv () {
      console.log(this.$config.host) // host
    }
  }
}

5. privateRuntimeConfig

指定privateRuntimeConfig，仅可在服务端获取到值。

当与publicRuntimeConfig冲突时，在服务端会覆盖publicRuntimeConfig的值，在前端会获取到publicRuntimeConfig的值。

//nuxt.config.js
export default {
  privateRuntimeConfig: {
    host: 'host private'
  }
}

//vue
export default {
  created () {
    console.log(this.$config.host) // 服务端返回 host private，前端返回 undefined
  },
  methods: {
    getEnv () {
      console.log(this.$config.host) // undefined
    }
  }
}

端口

在package.json文件中，可以通过命令指定端口号，此时会忽略nuxt.config.js中的端口号配置。

"scripts": {
  "dev:host": "nuxt --port 1103"
}

路由

base

根路径

routeNameSplitter

生成的路由，名称的分隔符（name属性），默认横线