Nuxt.js实战和配置详解

（选择nuxt.js的模块），可以选

axios

和

PWA

,如果选了axios，则会帮你在nuxt实例下注册

$axios

，让你可以在.vue文件中直接

this.$axios

发起请求。

开启eslint检查

在

nuxt.config.js

的build属性下添加:

 build: {
  extend (config, ctx) {
   // Run ESLint on save
   if (ctx.isDev && ctx.isClient) {
    config.module.rules.push({
     enforce: 'pre',
     test: /.(js|vue)$/,
     loader: 'eslint-loader',
     exclude: /(node_modules)/
    })
   }
  }
 }

这样开发时保存文件就可以检查语法了。nuxt默认使用的规则是 @nuxtjs （底层来自eslint-config-standard ），规则配置在

/.eslintrc.js

:

module.exports = {
 root: true,
 env: {
  browser: true,
  node: true
 },
 parserOptions: {
  parser: 'babel-eslint'
 },
 extends: [
  '@nuxtjs', // 该规则对应这个依赖： @nuxtjs/eslint-config
  'plugin:nuxt/recommended'
 ],
 // add your custom rules here
 rules: {
  'nuxt/no-cjs-in-config': 'off'
 }
}

如果不习惯用

standard

规则的团队可以将

@nuxtjs

改成其他的。

使用dotenv和@nuxtjs/dotenv统一管理环境变量

在node端，我们喜欢使用

dotenv

来管理项目中的环境变量，把所有环境变量都放在根目录下的

.env

中。

安装：

npm i dotenv

使用： 在根目录下新建一个

.env

文件，并写上需要管理的环境变量，比如服务端地址

APIHOST

:

APIHOST=http://your_server.com/api

在

/server/index.js

中使用（该文件是选Express服务端框架自动生成的）：

require('dotenv').config()
// 通过process.env即可使用
console.log(process.env.APIHOST) // http://your_server.com/api

此时我们只是让服务端可以使用

.env

的文件而已，Nuxt客户端并不能使用

.env

，按Nuxt.js文档所说，可以将客户端的环境变量放置在