[筆記] Nuxt js 初探筆記 3 – 佈署靜態頁面的測試問題

章節連結

當運用 Nuxt 開發若要產生靜態頁面,其概念類似於快照 ( snapshot ) 一份當下與 server-side 的互動結果。這個網頁被靜態託管的站點 ( 如 Netlify、Amazon S3 … 等 ) 讀取時,跟 SPA 網站相比,其 header 和運用 asyncData 所獲取的內容,早已在產生靜態頁面的階段保留在 html 內,因此 SEO 得以保存。
nuxt-js-logo


項目

production 環境的根目錄問題

若你放置靜態頁面的資料夾並非伺服器的根目錄,那在輸出成 production 時需要在 nuxt.config.js 加上 base 的設定

production 環境下,直接在網址列輸入 /<folder>/index.html 僅載入部分內容

這是正常現象,因為直接載入該頁面,並不會觸發相關的 JavaScript 進行作用。

如何在開發時可以提前預覽靜態網頁佈署時的樣貌

步驟 1:npm run generate ( 執行 nuxt generate ) =>產生靜態頁面
步驟 2:npm run start ( 執行 nuxt start ) => 模擬佈署到 static server 時的情況

打包後,為何有些自行安裝的套件沒有一同載入

由於 Nuxt 在 build 的階段,預設會排除 node_modules 下的多數文件 ( 因為 Server 端不需要 ),所以你需要手動添加,才能夠正常顯示


參考資料

1. Nuxt.js: Setting publicPath Causes Page Not Found
2. Commands and deployment
3. Vue-ECharts
4. Nuxt “generate”和”build”打包方式的区别
5. [[email protected]] 文件 – 起步 #80

按讚加入粉絲團

延伸閱讀