說明文件：https://nuxtjs.org/guide/configuration
nuxt.config.js 的內容大概長這樣
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'my-project',
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)/
})
}
}
}
}
主要的options說明：
- build
Object, 用來在vendor.bundle.js中增加模組，以減少bundle的體積，如果要使用第三方模組的話，可以用在這裡 - css
Array, 用來放 global 的css 檔案 - dev
Boolean, 用來定義網站屬於 Developement 還是 Production 狀態 - env
Object, 建立環境變數，這裡所定義的變數，可在Client 與 server 兩端之間共享（透過process.env.xxx） - generate
Object, 定義動態route用，這需要另外為文說明 - head
Object, 用來設定預設的metatag - loading
Boolean/Object/String, ，可設定loading bar的 高度/顏色等，如果設定為false的話，就不會顯示頁面上方的 loading bar - modules
Array, 用來添加如 awesome.js / google-analytics 等模組 - plugins
Array, 要在vue.js 管控DOM之前執行的 javascript ，後續可透過 Vue.use來載入這些plugin，，關於plugin的 詳細文件 - rootDir
String, 用來定義workspace的路徑 - router
String, 用來改寫預設的 vue route ，及一些 如 linkActiveClass 或 middleware 之類的相關設定 - srcDir
String, 定義source 的目錄 - transition
String/Object, 用來定義頁面切換的方式，詳細文件