當運用 Nuxt 開發若要產生靜態頁面，其概念類似於快照 ( snapshot ) 一份當下與 server-side 的互動結果。這個網頁被靜態託管的站點 ( 如 Netlify、Amazon S3 … 等 ) 讀取時，跟 SPA 網站相比，其 header 和運用 asyncData 所獲取的內容，早已在產生靜態頁面的階段保留在 html 內，因此 SEO 得以保存。
項目
production 環境的根目錄問題
若你放置靜態頁面的資料夾並非伺服器的根目錄，那在輸出成 production 時需要在 nuxt.config.js 加上 base 的設定
|
1 2 3 4 5 |
export default{ router:{ base: '/demo/' } } |
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
