nuxt.js 从＜入门＞到＜开发＞到＜部署＞

nuxt 中文网：https://www.nuxtjs.cn/

一.入门

1.nuxt 是什么？

一个基于 Vue.js 的服务端渲染应用框架

2.创建 nuxt 项目

此部分可参考官网：https://www.nuxtjs.cn/guide/installation

（1）安装 node 环境

（2）安装 create-nuxt-app

命令行中输入 npm i create-nuxt-app -g 进行全局安装

（3）创建项目

命令行中输入

npx create-nuxt-app testApp // 创建 testApp 项目

然后根据提示选择所需配置

二.开发

这里整理一些常用功能点。

1.自定义 404 页面

nuxt 默认有 404 效果，但多数情况下我们都会自定义 404 页面，在 nuxt.config.js 中加入

  router: {
    // 自定义 404 页面
    extendRoutes(routes, resolve) {
      routes.push({
        name: '404',
        path: '*',
        component: resolve(__dirname, 'pages/404.vue')
      })
    }
  }

参考官网：https://www.nuxtjs.cn/guides/configuration-glossary/configuration-router#extendroutes

2.封装全局变量

我们可以在 nuxt.config.js 中设置定义全局变量

  head: {
    title: process.env.title // 网站名
  },
  env: {
    title: '网站名',
    baseUrl: '/test/api'
  },

如何使用呢？

在 pages 页面组件中使用

  asyncData (context) {
    return {
      mainTitle: context.env.title
    }
  },

注意：asyncData 只能在页面组件中使用，asyncData 不要与 data 中的数据重合

官网-asyncData：https://www.nuxtjs.cn/guide/async-data

官网-env：https://www.nuxtjs.cn/guide/async-data

3.动态修改页面 title

当我们进行网页跳转的时候，一般要修改页面 title。这里以从主页跳转到新闻中心页为例：

在页面组件 news.vue 中

  asyncData (context) {
    return {
      mainTitle: context.env.title
    }
  },
  head () {
    return {
      // 修改页面 title
      title: this.title + '_' + this.mainTitle
    }
  },
  data () {
    return {
      title: '新闻中心'
    }
  },

这里通过 head() 方法进行页面 title 的修改

4.配置 Element-UI 按需引入方法

在 plugins 目录下创建 element-ui.js 文件，文件内容为需要引入的 element-ui 组件

import Vue from 'vue'
// element-ui 按需引入
import {
  Loading,
  MessageBox,
  Message,
  Notification,
  Popover
} from 'element-ui'

Vue.use(Popover)
Vue.use(Loading.directive)

Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message

然后在 nuxt.config.js 中引入该文件

  plugins: [
    '@/plugins/element-ui'
  ],

注意：这使用了按需引入就不要在引入 element-ui 的 css 文件了！！！

最后，还需要在该文件中配置

  build: {
    // Element UI 按需引入
    babel: {
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }
  }

5.将页面中的 css 提取到 link

nuxt 默认是将页面的 css 放在 <style> 标签中的，当 css 代码很多时就很难看了，而且也对爬虫不友好（我猜的，比如百度蜘蛛），所以可以考虑将它放入 link 中。

在 nuxt.config.js 中配置

方式一（不推荐）：

  build: {
    extractCSS: { allChunks: true } // CSS link 引入, 没有 preload (页面会闪烁)
  },

方式二（推荐）：

  build: {
    // CSS link preload 方式引入, 所有 css 样式文件会打包成 styles.css
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  },

方式二的缺点就是将所有样式都打包到一个文件中, 就没法按需加载

官网-extractcss：https://www.nuxtjs.cn/api/configuration-build#extractcss

三.项目部署

1.打包项目

运行 npm run build

2.将打包项目上传到服务器

只需上传这四个文件即可，然后 npm install

3.服务器上安装 pm2

安装 pm2 是用于做进程守护，通过 pm2 方式启动 nuxt 项目，以防止该进程被意外关闭。

比如，如服务器是 windows，当使用命令行工具启动 nuxt 项目后，若不小心关掉命令行工具，就会导致我们的项目挂掉，Linux 服务器类似。

执行 npm install -g pm2 全局安装

4.设置 ecosystem.config.js 文件

因为要用 pm2，所以需要添加该文件。内容如下

module.exports = {
  apps: [
    {
      name: 'mh', // 项目名
      exec_mode: 'cluster',
      instances: 'max', // Or a number of instances
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start',
    },
  ],
}

该文件与上面4个打包文件处于同级目录下

5.pm2 启动项目

通过执行 pm2 start 命令启动

更多 pm2 操作，包括开机自启动等请看我以前的文章：Linux 服务器部署 vue（SPA）与 nuxt（SSR）项目