Nuxt常用配置項

muzidigbig發表於2018-12-07
  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]' 
        } 
    } 
],

 

 

相關文章