Nuxt.js允許妳在自動生成的vendor.bundle.js文件中添加壹些模塊,以減少應用bundle的體積。如果妳的應用依賴第三方模塊,這個配置項是十分實用的。
Nuxtjs裏配置全局的css文件、模塊、庫。(每個頁面都會被引入,壹般用於公***樣式)
如果要使用sass就必須要分別安裝node-sass和sass-loader。
在nuxt.config.js中,添加要使用的css資源:
Nuxt.js會自動識別被導入文件的擴展名,之後,webpack會使用對應的預處理器進行處理。前提是妳安裝了對應的預處理器。
配置Nuxt.js應用是開發模式還是生產模式。
dev屬性的值會被nuxt命令覆蓋:
在server.js中:
然後可在package.json中添加腳本配置如下:
註意:要運行上面的示例,妳需要運行npm install --save-dev cross-env 安裝 cross-env。 如果妳在非 Windows 環境下開發,妳可以不用安裝 cross-env,這時需要把 start 腳本中的 cross-env 去掉。
Nuxt.js讓妳可以配置在客戶端和服務端***享的環境變量。
例如(nuxt.config.js):
以上配置我們創建壹個baseUrl環境變量,如果應用設定了BASE_URL環境變量,那麽baseUrl的值等於BASE_URL的值,否則其值為 http://localhost:3000 。
然後,我們可以通過以下兩種方式來使用baseUrl變量:
1.通過process.env.baseUrl
2.通過context.baseUrl
舉個例子,我們可以利用它來配置axios的自定義實例。
plugins/axios.js:
然後在頁面中,我們可以使用import axios from '~plugins/axios'引入axios模塊。
配置Nuxt.js應用生成靜態站點的具體方式。
當運行nuxt generate命令或在編碼中調用nuxt.generate()時,Nuxt.js會使用generate屬性的配置。
借助head屬性,Nuxt.js讓妳可以在nuxt.config.js中配置應用的meta信息。
想了解head屬性的可用配置,可以參考vue-meta配置文檔。
modules是Nuxt.js擴展,可以擴展它的核心功能並添加無限的集成。
用於設置路徑解析的模塊目錄,例如:webpack resolveLoading, nodeExternal和postcss。配置路徑為相對路徑options.rootDir
plugins屬性使得妳可以輕易地為Nuxt.js配置使用Vue.js插件。
例如(nuxt.config.js):
然後我們需要創建plugins/vue-notifications.js文件:
plugins屬性配置的所有插件會在Nuxt.js應用初始化之前被加載導入。
每次妳需要使用 Vue.use() 時,妳需要在 plugins/ 目錄下創建相應的插件文件,並在 nuxt.config.js 中的 plugins 配置項中配置插件的路徑。
設置Nuxt.js應用的根目錄。
該配置項的值會被nuxt命令行指定的路徑參數覆蓋(例如:nuxt my-app/會將rootDir的值覆蓋設置為my-app/目錄對應的絕對路徑)。
Nuxt.js允許為應用程序內部nuxt.config.js中定義服務器訪問主機和端口。
設置Nuxt.js應用的源碼目錄
用於設置頁面切換過渡效果的默認屬性值。
默認值:
例如(nuxt.config.js):
transition用於設置頁面切換過渡效果。
用於設置布局過渡的默認屬性。配置與layout相同
默認:
例如(nuxt.config.js):
全局配置示例css: