nuxt.config.js 配置

• head 配置
  页面默认meta设置
  具体配置：https://zh.nuxtjs.org/api/configuration-head/

• loading
  个性化定制页面加载 （默认显示加载进度条）
  可以定制它的样式，禁用或者创建自己的加载组件。
  具体配置：https://zh.nuxtjs.org/api/configuration-loading/

• css
  定义应用的全局样式文件、模块或第三方库
  具体配置：https://zh.nuxtjs.org/api/configuration-css/

• plugins
  配置需要在 根vue.js应用 实例化之前运行的 Javascript 插件。
  ssr设置为false 只在客户端使用
  具体配置：https://zh.nuxtjs.org/api/configuration-plugins/

• routes
  覆盖 Nuxt.js 默认的 vue-router 配置。

  • base 配置应用的根URL
  • extendRoutes 扩展路由（添加自定义路由）
  • 激活类名配置
  • 应用的每个页面的中间件
  • scrollBehavior 个性化配置跳转至目标页面后的页面滚动位置
    具体配置：https://zh.nuxtjs.org/api/configuration-router/
    中间件使用

  //  页面单独使用
  export default {
   midddleware: 'auth'
  }
  // 2、 全局使用，中间件在每个路由改变时被调用
  router : {
  midddleware: 'auth'
  }
  
  

• build
  Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的。
  【webpack的相关配置可以在这配置】

  • 1、vendor配置 ： 添加模块，配置只打包一次，减少应用bundle的体积。比如，对于axios这种ajax请求插件，基本每个页面都使用import引入，会导致打包时打包多次，这时需要配置，实现只打包一次。

    build: {
       vendor: ['axios', 'iview']
    }
  

  • 2、plugins 配置 Webpack 插件
    项目开发时，js文件需要用到lodash

    plugins: [
       new webpack.ProvidePlugin({
         _: 'lodash'
       })
     ]
  

• generate
  生成静态站时，动态路由不可识别，所以需要这边配置生成对应目录结构的静态文件

  generate: {
  // 动态路由不可识别，所以这边需要写
  // 可预测的可以直接写
  //不可预测的动态路由则通过axios搭配promise或者回调函数配置 【具体可看官网】
   routes: [
     '/zh',
     '/en',
     '/zh/service/a',
     '/en/service/a',
     '/zh/service/b',
     '/en/service/b',
   ]
  

这边只整理了目前我所用到的主要配置，具体配置可看官网：https://zh.nuxtjs.org/guide/configuration

赞赞哇.png