美文网首页vue技术栈
nuxt.config.js 配置

nuxt.config.js 配置

作者: 前端girl吖 | 来源:发表于2019-01-22 16:37 被阅读0次
    • 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

    相关文章

      网友评论

        本文标题:nuxt.config.js 配置

        本文链接:https://www.haomeiwen.com/subject/htcprqtx.html