Vue 建立 Nuxt 項目 SSR 服務器渲染 解決 SPA 單頁面 SEO優化 問題 （詳細教程）

Vue SSR 服務器渲染 解決 SPA 單頁面 SEO優化 問題

構建步驟

1. 建立nuxt 項目

檢查 npx

// npm 5.2.0 以上版本默認包含 npx 
    // 建立項目
    npx create-nuxt-app project_name

Choose the package manager Yarn 須要安裝 yarn 安裝 yarn

yarn 下載

配置參考

配置詳解

? Project name nuxttest                            //項目名稱
? Project description My astounding Nuxt.js project        //項目描述
? Author name forever                                    //做者姓名
? Choose programming language JavaScript            //選擇開發的語言 javascript or typescript
? Choose the package manager Yarn                //選擇包管理的工具 npm or yarn
? Choose UI framework Element                    //選擇一個UI框架
? Choose custom server framework Express            //選擇一種服務端框架
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) //檢查代碼是否規範
? Choose test framework None                        //選擇一個測試框架
? Choose rendering mode Universal (SSR)             //選擇一種渲染模式 SSR or SPA
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

運行

npm start

訪問報錯 NuxtServerError:Request failed with status code 500

解決

//升級 npm 
npm install npm -g

從新運行

運行效果

目錄結構