nuxt config 配置

香菊网 发表于: 2020-01-21 分类: ssr  前端front  H5部分  

引言

    因为nuxt的配置和引入插件不像vue那样有一个 main.js 而是 全部插件和样式和路由都是直接配置在nuxt.config.js 中的,可以通过针对一系列参数的设置来完成 Nuxt.js 项目的配置,官网上都有了配置的规范,本文介绍一些比较常用的功能。

 

  • head配置 可以全局配置你的页面的头部
  head: {
    title: '香菊网-技术博客(www.xiangjv.top)',
    meta: [{
        charset: 'utf-8'
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1'
      },
      {
        hid: 'keywords',
        name: 'keywords',
        content: '香菊,香菊网'
      },
      {
        hid: 'description',
        name: 'description',
        content: 'www.xiangjv.top'
      }, 
    ],
    link: [{
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico'
    },{
      rel: 'manifest',
      href: '/manifest.json'
    }],
    script:[
      // 百度分享
      {src: '/js/share.js'}
    ]
  },

 

  • loading  用于个性化定制 Nuxt.js 使用的加载组件。
  loading: './components/Loading',

 

  • css   用于定义全局(所有页面均需引用的)样式文件、模块或第三方库。
  css: [
    'element-ui/lib/theme-chalk/index.css',
    '~/assets/css/reset.css',
  ],

 

  • plugins 用于配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
  plugins: [
    { src: '@/plugins/element-ui', ssr: true},
    { src: '@/plugins/prism.js', ssr: true} ,    
  ],

 

  • modules  允许您将Nuxt模块添加到项目中。
  modules: [
    '@nuxtjs/axios', "@nuxtjs/proxy"
  ],

 

  • proxy  定义接口的跨域
  proxy: [
    [
      '/api',{
        // target: 'http://172.21.44.67:2345/api',
        target: 'http://47.107.171.45:2345/api',
        changeOrigin:true,
        pathRewrite: {
        '^/api': '/'
        }
      }
    ],
  ],
  • router 定义路由调转的形式
  router: {
    // mode: 'hash'
    // scrollBehavior: 
  },

 

  • env 设置全局变量
  env: {
    baseUrl: 'http://47.107.171.45:2345'
  }

 

  • buid

Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块,以减少应用 bundle 的体积。如果你的应用依赖第三方模块,这个配置项是十分实用的。通常我们会在 build 的 vendor 字段中引入 axios 模块,从而在项目中进行 HTTP 请求( axios 也是 Vue.js 官方推荐的 HTTP 请求框架)。

 

 

 

标签: ssr前端frontH5部分
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮