Nuxt常用配置项

  1. 更改地址栏中的ico图标

2.在创建nuxt项目是使用了esline,在编辑代码的时候受到影响,怎么注销掉esline

3.端口被占用配置端口

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

配置好后,我们在终端中输入: npm run dev

4.配置全局CSS/重置标签默认样式/插件

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

/assets/css/reset.css

/nuxt.config.js

设置好后,在终端输:npm run dev。即可看到效果

5. nuxt.config.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: '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'}
    ]
  },

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

loaders:[ //配置一个url-loader来进行小图片的64位打包
    { 
        test:/\.(png|jpe?g|gif|svg)$/, 
        loader:"url-loader", 
        query:{ 
            limit:10000, 
            name:'img/[name].[hash].[ext]' 
        } 
    } 
],

 

 

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值