當前位置:編程學習大全網 - 源碼下載 - nuxt.config.js文件

nuxt.config.js文件

nuxt.config.js文件用於組織Nuxt.js應用的個性化配置,以便覆蓋默認配置。

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:

  • 上一篇:談論刪除源代碼
  • 下一篇:英偉達顯卡錯誤代碼43
  • copyright 2024編程學習大全網