关于Nuxt.js部署和配置，那些你闭着眼睛都要会写的步骤

如何使用外部资源？

1、全局配置这样写，在 nuxt.config.js 中配置你想引用的资源文件：

module.exports = {
  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
    ]
  }
}

2、局部配置这样写，可在 pages 目录内的 .vue 文件中引用外部资源：

<script>
export default {
  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
    ]
  }
}
</script>

如何使用预处理器？

基于vue-loader, 我们可以通过 lang 属性在组件中的template， script 或 style上使用各种预处理器。比如，我们在 pages/index.vue 组件中使用 Pug， CoffeeScript 和 Sass：

<template lang="pug">
  h1.red Hello {{ name }}!
</template>

<script lang="coffee">
export default data: ->
  { name: 'World' }
</script>

<style lang="sass">
.red
  color: red
</style>

<style lang="scss">
.red {
  color: red
}
</style>

注：记得安装这些预处理器对应的 npm 依赖包和 Webpack 加载器

npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader node-sass sass-loader

如何使用 JSX？

Nuxt.js 使用 Vue.js 官方的 babel-preset-vue-app 做 babel 的默认配置。

你可以在组件的 render 方法中直接使用 JSX 而不需要做额外的配置：

<script>
export default {
  data () {
    return { name: 'World' }
  },
  render (h) {
    return <h1 class="red">{this.name}</h1>
  }
}
</script>

注：这里的 h 为 createElement 的简化别名，你会在Vue生态系统中看到它，但它实际上是JSX的可选项，因为它会在ES2015+语法中声明的任何方法和getter（不是函数或箭头函数）中自动注入const h = this.$createElement ，所以你可以删除(h)参数。

如何添加 PostCSS插件?

PostCSS是使用JS插件转换样式的工具。这些插件可以使你的CSS更加整洁，支持变量和混合，可以转换将来的CSS语法，内联图像等等。

可在 nuxt.config.js 文件增加以下配置来添加 postcss 插件：

export default {
  build: {
    postcss: {
      // 添加插件名称作为键，参数作为值
      // 使用npm或yarn安装它们
      plugins: {
        // 通过传递 false 来禁用插件
        'postcss-url': false,
        'postcss-nested': {},
        'postcss-responsive-type': {},
        'postcss-hexrgba': {}
      },
      preset: {
        // 更改postcss-preset-env 设置
        autoprefixer: {
          grid: true
        }
      }
    }
  }
}

如何扩展 Webpack 的配置？

你可以通过 nuxt.config.js 文件中的 extend 配置项来扩展 Webpack 的配置：

module.exports = {
  build: {
    extend (config, { isDev, isClient }) {
      // ...
    }
  }
}

如何添加 Webpack 插件？

可以在 nuxt.config.js 中添加 Webpack 插件：

const webpack = require('webpack')

module.exports = {
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery',
        '_': 'lodash'
        // ...etc.
      })
    ]
  }
}

如何更改应用的主机和端口配置？

你可以通过不同方式配置主机和端口，如下列出从最高优先级到最低优先级。

注：如果为port指定字符串值’0’（不是 0），将为你的Nuxt应用程序分配一个随机端口。

1、作为命令参数直接传递

nuxt --hostname myhost --port 3333

或者

"scripts": {
  "dev": "nuxt --hostname myhost --port 3333"
}

2、在 nuxt.config.js 中配置:

export default {
  server: {
    port: 8000, // default: 3000
    host: '0.0.0.0' // default: localhost
  }
  // other configs
}

3、使用 NUXT_HOST 和 NUXT_PORT env 变量

"scripts": {
  "dev": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt"
}

注: 为了更好的跨平台开发支持，你可以使用 cross-env 依赖包。（cross-env可以使用单个命令，而不必担心为平台正确设置或使用环境变量。）

安装依赖:

npm install --save-dev cross-env

配置cross-env:

"scripts": {
  "dev": "cross-env NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt"
}

4、使用HOST和PORT env变量

"scripts": {
  "dev": "HOST=0.0.0.0 PORT=3333 nuxt"
}

5、在 package.json 中配置 nuxt :

"config": {
  "nuxt": {
    "host": "0.0.0.0",
    "port": "3333"
  }
},
"scripts": {
  "dev": "nuxt"
}

如何使用Vue组件中的 cache？

虽然Vue的SSR非常快，但由于创建组件实例和Virtual DOM节点的成本，它无法与纯粹基于字符串的模板的性能相匹配。在SSR性能至关重要的情况下，合理地利用缓存策略可以大大缩短响应时间并减少服务器负载。

请使用Nuxt.js的Component Cache module模块。此模块使用vue-server-renderer为Vue组件添加LRU缓存支持。

使用 yarn 或 npm 将 @nuxtjs/component-cache 依赖项添加到项目中
将 @nuxtjs/component-cache 添加到 nuxt.config.js 的modules部分

{
  modules: [
    // 简单的用法
    '@nuxtjs/component-cache',

    // 配置选项
    ['@nuxtjs/component-cache', {
      max: 10000,
      maxAge: 1000 * 60 * 60
    }]
  ]
}

如何发起跨域资源请求？

用于 Nuxt.js 的 http-proxy 中间件解决方案：

npm i @nuxtjs/proxy -D

在 nuxt.config.js 配置文件中添加对应的模块，并设置代理：

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/api': {
      target: 'http://example.com',
      pathRewrite: {
        '^/api' : '/'
      }
    }
  }