XiangJv

引言

    因为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 请求框架）。