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)/ ???????}) ?????} ???} ?}

nuxt.js1-3

原文地址：https://www.cnblogs.com/xiaofandegeng/p/9073626.html