Nuxt.js2 初体验，从入门到上手

前段时间领导要求公司现有官网全部重构，对网页SEO有强烈要求，本来决定使用Nuxt.js去写的，不知道出于何种原因被领导否决掉了，最后还是使用传统的PHP解决的，但是技术研究到一半不能不研究，虽然工作中用的少但这确实是一项很不错的技术，尤其对SEO要求比较高的网页项目...因为是基于Vue的所以上手也比较快，整个开发流程和技术上的痛点基本了然于胸，本地从构建到部署也基本上也完成了一个完整的Demo，像这种比较偏的技术不记录一下我担心后面会忘记，趁空闲时间就随意记录一下吧...

一、 NuxtJs配置IP与端口

开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的 package.json 里对 config 项进行配置。比如现在我们想把IP配置成 127.0.0.1 ，端口设置 8080。

 "config": {
    "nuxt": {
      "host": "127.0.0.1",
      "port": "3001"
    }
  }

二、路由和组件

在创建项目的时候路由就已经内置了，Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

假设 pages 的目录结构如下：

解释
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么，Nuxt.js 自动生成的路由配置如下：

解释
router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

三、动态路由

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录。

以下目录结构：

解释
pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

Nuxt.js 生成对应的路由配置表为：

解释
router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

你会发现名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。

四、全局组件

默认组件存放位置统一在 components 目录下，顶层 .vue 组件为全局组件，在 nuxt.config.js 文件中可配置自动导入在页面中无需引入注册即可使用

// Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

五、局部组件

局部组件也可存放于 components 目录下，需要区别的是可创建和pages页面路由相同的名称文件夹统一存放，局部组件和全局组件不同，不会自动导入注册，需手动引入注册。

目录结构：

index.vue代码结构：

<template>
  <div>
    <!-- 页面局部组件 -->
    <IndexComponent></IndexComponent>
    <!-- 全局组件 -->
    <GlobalComponent></GlobalComponent>
  </div>
</template>

<script>
  // 引入页面局部组件
  import IndexComponent from '../components/index/IndexComponent.vue'
  export default {
    name: 'IndexPage',
    components: {
      IndexComponent
    },
  }
</script>

五、引入UI库

我在创建项目的时候记得是选择了UI库的，但是不知道在实际使用的时候为什么没有装成功，第二次重新创建的时候还是同样结果，无奈重新手动安装了一波，我这里使用的是 element-ui，就以这个库为例吧

npm install element-ui 常规安装，package.json 显示依赖才算装成功
需要在根目录plugins文件下创建同名.js插件，并安装插件：

编辑插件 element—ui.js：

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(Element, { locale })

在 nuxt.config.js 配置插件信息，配置完成后可在项目中正常使用插件了

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ['element-ui/lib/theme-chalk/index.css'],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ['@/plugins/element-ui'],

六、使用axios请求

通过package.json可以看出我们在创建项目的时候默认安装的请求插件是成功的，项目中我们可以通过this.$axios 直接使用，但是项目中我们需要对请求组件进行功能拓展，需要进行请求配置和拦截及核心数据返回

拓展插件步骤和第五步引入UI库步骤相同，因为在创建项目的时候已经配置了axios所以这里不需要再install了，直接在根目录plugins文件下创建同名 axios.js插件配置即可

export default function ({ $axios, redirect }) {
  // 拦截请求，可配置请求头信息
  $axios.onRequest(config => {
    config.Authorization && $axios.setHeader('Authorization', config.Authorization)
    console.log('$axios.onRequest--------:',  config)
  })
  // 请求响应体，返回核心数据
  $axios.onResponse( res => {
    console.log('$axios.onResponse---------:', res)
    return res.data
  })
  // 请求失败拦截
  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}

七、使用 VueX 状态管理机

八、SSR 页面信息配置

www.nuxtjs.cn/api/pages-h…

九、环境变量配置

webpack的打包或许都有异曲同工之妙，和当初配置vue环境变量是一样的逻辑，只有些许不同之处，总共分为两个步骤

在根目录创建.env环境配置文件，文件内部变量名称必须以 NUXT_ENV_ 开头，我这里创建了三个打包环境分别对应测试环境、开发环境及生产环境进行相关配置。

在 package.json 里面要进行打包命令改造，build对应环境命令时就会打包对应环境配置，我这里运行npm run build默认就是打包生产环境，依此类推就是打包其他环境。

"scripts": {
    "dev": "nuxt --dotenv .env.dev",
    "build": "nuxt build --dotenv .env.prod",
    "build:beta": "nuxt build --dotenv .env.beta",
    "build:dev": "nuxt build --dotenv .env.dev",
    "start": "nuxt start",
    "generate": "nuxt generate"
  }

环境变量读取和使用，可直接通过 process.env. 获取变量KEY值使用，值得注意的是直接打印process.env对象你将会得到一个空对象，所以这里一定要加KEY才能打印出来

mounted() {
      console.log('process.env:', process.env.NUXT_ENV_NAME, process.env.NUXT_ENV_BASE_URL)
      this.$axios.get('test.json').then(res => {
        console.log('index.vue 请求成功:', res)
      })
    }

十、SSR打包，静态资源部署

正常的 webpack 如何打包我们这里就如何打包，第一步先运行打包指令npm run build，在根目录下的 .nuxt 目录下会自动生成一个 dist 文件证明打包成功。

接下来我们需要将根目录下打包好的 .nuxt文件夹、static 文件夹、nuxt.config.js 和 package.json 文件提取出来放至服务端单独文件夹备用，我本地是模拟服务端开启的一个服务做测试用，将这些文件统一放在一个名为 abc 的文件夹内。

cd至当前文件夹，依次运行指令npm install 和 npm start 你便可以开启一个生产环境的服务，本地开启的服务默认为http://localhost:3000/