nuxt.js1-3

Posted 2020-11-07 小凡的耿

Nuxt常用配置项

　　已经了解Nuxt生成项目的目录结构后，其实就可以愉快的玩耍了，但是感觉还是收到了很多约束，比如开发时的IP地址和端口（localhost:3000）和公用的CSS，这节课我们就学习一些Nuxt的常用配置，让我们开发的更自由。

　配置IP和端口：

　　开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的package.json里对config项进行配置。比如现在我们想把IP配置成127.0.0.1，端口设置1818。

　/package.json

  "config":{
    "nuxt":{
      "host":"127.0.0.1",
      "port":"1818"
    }
  },

　　配置好后，我们在终端中输入npm run dev，然后你会看到服务地址改为了127.0.0.1:1818.

　配置全局CSS

　　在开发多页项目时，都会定义一个全局的CSS来初始化我们的页面渲染，比如把padding和margin设置成0，网上也有非常出名的开源css文件normailze.css。要定义这些配置，需要在nuxt.config.js里进行操作。

　　比如现在我们要把页面字体设置为红色，就可以在assets/css/normailze.css文件，然后把字体设置为红色。

　/assets/css/normailze.css

html{
    color:red;
}

　/nuxt.config.js

 css:[‘~assets/css/normailze.css‘],

　　设置好后，在终端输入npm run dev 。然后你会发现字体已经变成了红色。

　配置webpack的loader

　　在nuxt.config.js里是可以对webpack的基本配置进行覆盖的，比如现在我们要配置一个url-loader来进行小图片的64位打包。就可以在nuxt.config.js的build选项里进行配置。

build: {
 
    loaders:[
      {
        test:/\.(png|jpe?g|gif|svg)$/,
        loader:"url-loader",
        query:{
          limit:10000,
          name:‘img/[name].[hash].[ext]‘
        }
      }
    ],
 
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: ‘pre‘,
          test: /\.(js|vue)$/,
          loader: ‘eslint-loader‘,
          exclude: /(node_modules)/
        })
      }
    }
  }