nuxt.config.js 配置

简介

nuxt.config.js 是 Nuxt.js 的配置文件,可以通过针对一系列参数的设置来完成 Nuxt.js 项目的配置,可以在Nuxt.js 官网 找到针对这个文件的说明。

head 配置

可以在这个配置项中配置全局的 head ,如定义网站的标题、 meta ,引入第三方的 CSS、JavaScript 文件等:

 head: {
  title: '百姓店铺',
  meta: [
     { charset: 'utf-8' },
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
     { name: 'applicable-device', content: 'pc,mobile' },
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/logoicon.ico' }//地址栏小图标的引入
     { rel: 'stylesheet', type: 'text/css', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'},
  ],
  script: [
     {src: 'https://code.jquery.com/jquery-3.1.1.min.js'},
     {src: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'}
  ]
},

build

这个配置项用来配置 Nuxt.js 项目的构建规则,即 Webpack 的构建配置,如通过 vendor 字段引入第三方模块,通过 plugin 字段配置 Webpack 插件,通过 loaders 字段自定义 Webpack 加载器等。通常我们会在 build 的 vendor 字段中引入 axios 模块,从而在项目中进行 HTTP 请求( axios 也是 Vue.js 官方推荐的 HTTP 请求框架)。

build: {
   vendor: ['core-js', 'axios'],
   loaders: [
     {
       test: /\.(scss|sass)$/,
       use: [{
         loader: "style-loader"
       }, {
         loader: "css-loader"
       }, {
         loader: "sass-loader"
       }]
     },
     {
       test: /\.(png|jpe?g|gif|svg)$/,
       loader: 'url-loader',
       query: {
         limit: 1000,
         name: 'img/[name].[hash:7].[ext]'
       }
     },
     {
       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
       loader: 'url-loader',
       query: {
         limit: 1000,
         name: 'fonts/[name].[hash:7].[ext]'
       }
     }
   ]
 }

css

在这个配置项中,引入全局的 CSS 文件,之后每个页面都会被引入。

  css: [ //该配置项用于定义应用的全局(所有页面均需引用的)样式文件、模块或第三方库。
    'element-ui/lib/theme-chalk/index.css',//在创建项目的时候安装了elememt插件,这里自动引入插件的默认样式
    '@/assets/css/reset.css',   //引入assets下的reset.css全局标签重置样式
    '@/assets/main.css'  //引入全局的动画样式
  ],

router

可以在此配置路由的基本规则,以及进行中间件的配置。例如,你可以创建一个用来获取 User-Agent 的中间件,并在此加载。

loading

Nuxt.js 提供了一套页面内加载进度指示组件,可以在此配置颜色,禁用,或是配置自定义的加载组件。

env

可以在此配置用来在服务端和客户端共享的全局变量。

plugins

该配置项用于配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

modules

该配置项允许您将Nuxt模块添加到项目中。

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×