七月 8, 2018 | 前端與Vue
Nuxt基礎教學:什麼!nuxt設定原來是這回事,一次就會nuxt.config.js
想要自定些東西卻不知道該從何下手嗎?讓我們來看看nuxt.config.js裡面藏著哪些東西吧~!
module.exports = {
mode:'spa',
/*
** Headers of the page
*/
head: {
title: 'nuxt-spa',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress bar color
*/
loading: { color: '#3B8070' },
/*
** Build configuration
*/
build: {
/*
** 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時的nuxt.config.js是這個樣子的
nuxt.config.js 文件用於組織Nuxt.js 應用的個性化配置,以便覆蓋默認配置。 該文件名為Nuxt.js保留的,不可更改。
head
head 屬性配置 借助 head 屬性,Nuxt.js 讓你可以在 nuxt.config.js 中配置應用的 meta 信息。 假如像是需要使用到CSS的link,都可以在這個地方進行引入
loading
在頁面切換的时候,Nuxt.js 使用内置的加載組件顯示加載進度條。 我們可以在這邊自定自己想要的樣式或是停用
停用進度條
module.exports = {
loading: false
}
個性化進度條樣式
可以使用的key有
color=>進度條的顏色
failedColor => 頁面載入失敗時的顏色
height => 進度條的高度
duration => 進度條最大顯示時間(單位是毫秒)
// 使用方式
module.exports = {
loading: {
color: 'blue',
height: '5px'
}
}