資訊專欄INFORMATION COLUMN
摘要：好了，項目啟動了，目錄結構也清楚了，接下來就是整個現有項目的遷移了目前正在改造項目，文章尚未寫完，會抽時間不定期的繼續更新項目的改造過程及分享改造過程中遇到的問題
公司項目，最初只為了實現前后端分離式開發，直接選擇了vue框架進行開發，然而現在項目基本完成了，發現蜘蛛根本就抓取不到網站數據，搜索引擎搜出來，都是一片空白沒有數據，需要對項目做SEO優化。
本人第一次接觸SEO的優化，完全是零基礎，開啟了小白菜的SEO探索之旅，記錄一下一路的過程，方便自己回顧與大家的探討，如有不度之處，還請路過的大神指導一下。
常用SEO優化方式在查閱了一些資料后，常見的SEO優化有以下兩種：
prerender-spa-plugin客戶端預渲染
ssr服務端渲染
在選擇預渲染模式還是服務端渲染的模式時，簡單做了個demo進行了一下測試，由于公司項目以檢索為主的產品，后期需要蜘蛛抓取的界面太龐大，最終選擇用vue提供的nuxt.js框架去改造現有的項目。
簡單寫一下prerender-spa-plugin客戶端預渲染的過程
prerender-spa-plugin客戶端預渲染相關文檔可查看：prerender-spa-plugin
安裝直接在vue項目中，通過npm或者yarn進行安裝 ##### Yarn $ yarn add prerender-spa-plugin ##### NPM $ npm i prerender-spa-plugin -S配置
頂部引入：
const PrerenderSPAPlugin = require("prerender-spa-plugin")
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
在plugins中配置
new PrerenderSPAPlugin({
//生成的預渲染html文件存放路徑
staticDir: path.join(__dirname, "../dist"),
//需要預渲染的界面路徑（router）
routes: ["/", "/index"],
//跨域轉發配置,預渲染時獲取數據的api地址
server: {
proxy: {
"/api": {
target: "http://192.168.1.223:9002",
changeOrigin: true,
pathRewrite: {
"^/api": "/"
}
}
}
},
//在一定時間后再捕獲頁面信息，使得頁面數據信息加載完成，
必選，不然界面依然會沒有數據
captureAfterTime: 5000,
//忽略打包錯誤
maxAttempts: 10,
renderer: new Renderer({
//可選，頁面在被搜索時的關鍵詞
inject: {
foo: "bar"
},
//可選，無桌面系統可去掉
headless: false,
//必選，‘render-event"必須與main.js中mounted下的配置名稱一致
renderAfterDocumentEvent: "render-event"
})
})
new Vue({
el: "#app",
router,
store,
template: "
// build時需要將"/"切換為"./"
assetsPublicPath: "./"
到此整個預渲染模式，改造完成了。
此次demo中尚未處理meta信息，需要配置meta信息的，可查看文檔vue-meta-info,這是一個基于vue 2.0的插件，它會讓你更好的管理你的vue頁面里面的meta信息，詳細配置過程可參考：muwoo作者寫的“處理 Vue 單頁面 Meta SEO的另一種思路”文章，里邊整個過程寫的挺詳細的
作為新手，并不介意自己動手去配置環境，建議直接用nuxt.js提供的腳手架(create-nuxt-app)進行快速搭建項目，具體搭建過程可查看官網文檔：Nuxt.js
nuxt.js項目搭建確保安裝了npx（npx在NPM版本5.2.0默認安裝了)
$ npx create-nuxt-app <項目名>
或者
$ yarn create nuxt-app <項目名>
之后會有一系列的選項：
在集成的服務器端框架之間進行選擇:
None (Nuxt默認服務器)
Express
Koa
Hapi
Feathers
Micro
Adonis (WIP)
選擇您喜歡的UI框架:
None (無)
Bootstrap
Vuetify
Bulma
Tailwind
Element UI
Ant Design Vue
Buefy
選擇你想要的Nuxt模式 (Universal or SPA),不懂此選項的可以看一下這篇文章render mode的區別
添加 axios module 以輕松地將HTTP請求發送到您的應用程序中。
添加 EsLint 以在保存時代碼規范和錯誤檢查您的代碼。
添加 Prettier 以在保存時格式化/美化您的代碼。
官網都有詳細的講解，根據自己的需求選擇就好了，當安裝完后，項目就可以直接運行了
npm run dev*問題
在啟動時遇到如下問題：
找了一圈，發現搭建項目時默認的element-ui版本太低，直接用npm uninstall element-ui卸載當前版本，重新使用npm install element-ui@版本號安裝即可，版本號使用2.7.2及以上均可
項目目錄簡介既然是對現有Vue項目的改造，就先看一下nuxt.js各目錄的功能及vue項目目錄的對比吧
nuxt.js的目錄結構├── assets // 資源文件。用于組織未編譯的靜態資源入LESS、SASS 或 JavaScript │ └── logo.jpg // 默認logo圖片 ├── components // 組件。用于自己編寫的Vue組件，比如滾動組件，日歷組件，分頁組件 │ └── AppLogo.vue // 默認logo組件 ├── layouts // 布局。頁面都需要有一個布局，默認為 default。它規定了一個頁面如何布局頁面。所有頁面都會加載在布局頁面中的nuxt.js目錄與vue.js目錄的對比標簽中。 │ └── default.vue // 默認模板頁面，類似mvc中的layout ├── middleware // 中間件。存放中間件?？梢栽陧撁嬷姓{用： middleware: "middlewareName" 。 ├── pages // 頁面。一個 vue 文件即為一個頁面。 │ └── index.vue // 默認首頁面 ├── plugins // 用于存放JavaScript插件的地方 │ └── element-ui.js // 上邊我們安裝的UI框架 ├── static // 用于存放靜態資源文件，比如圖片，此類文件不會被 Nuxt.js 調用 Webpack 進行構建編譯處理。 服務器啟動的時候，該目錄下的文件會映射至應用的根路徑 / 下。 ├── store // 用于組織應用的Vuex 狀態管理。 ├── .editorconfig // 開發工具格式配置 ├── .eslintrc.js // ESLint的配置文件，用于檢查代碼格式 ├── .gitignore // 配置git不上傳的文件 ├── nuxt.config.js // 用于組織Nuxt.js應用的個性化配置，比如網站title，已便覆蓋默認配置 ├── package.json // npm包管理配置文件 └── README.md // 說明文檔
整體來看，目錄結構沒有太大的變動，區別比較大的就是router文件夾，nuxt.js項目中并沒有router路由的配置，這個就是 nuxt 框架的獨到之處，為了能實現更好的SSR渲染，它使用的是根據頁面結構，自動路由，所以你的文件名，就是你的路由名稱，具體規則可查看官網文檔路由。
好了，nuxt項目啟動了，目錄結構也清楚了，接下來就是整個現有Vue項目的遷移了
PS：目前正在改造項目，文章尚未寫完，會抽時間不定期的繼續更新vue項目的改造過程及分享改造過程中遇到的問題
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106136.html
摘要：先來看一下容器的文件中間一些操作省略這里用了多階段構建容器，如果直接通過設置環境變量只會在后面一個階段生效，但是是在第一個階段執行的，所以環境變量不能應用到當中。 在今年年初的時候，完成了自己的個Fame博客系統的實現，當時也做了一篇博文Spring-boot+Vue = Fame 寫blog的一次小結作為記錄和介紹。從完成實現到現在，也斷斷續續的根據實際的使用情況進行更新。 只不過每...
摘要：腳手架安裝好的基本項目項目名，如，按照提示安裝你想要的東西，本次項目預裝模式下，默認的項目目錄如下保存自動格式化修復本人習慣縮進為個空格，但是生成的項目默認為個，因此需要更改配置文件下的更改為保存時自動修復錯誤保存自動格式化開啟支 腳手架安裝好nuxt的基本項目 npx create-nuxt-app ，如：npx create-nuxt-app nuxt-ts，按照提示安裝你想要的...
摘要：所以，這次就來聊聊組件的服務器端渲染。這種模式下，后端只提供接口，傳統的服務器端路由模板渲染則都有層接管。這樣，前端開發人員可以自由的決定哪些組件需要在服務器端渲染，哪些組件可以放在客戶端渲染，前后端完全解耦，但又保留了服務器端渲染的功能。 細說 Vue 組件的服務器端渲染 聲明：需要讀者對 NodeJs、Vue 服務器端渲染有一定的了解 現在，前后端分離與客戶端渲染已經成為前端開發的...
摘要：注本文是我在開發過程中遇到問題及解決方法的總結，之后會持續更新，希望幫助到更多的學習者。文中有不妥的地方希望指出共同學習，同時歡迎一起補充。 注：本文是我在開發過程中遇到問題及解決方法的總結，之后會持續更新，希望幫助到更多的學習者。文中有不妥的地方希望指出共同學習，同時歡迎一起補充。 npm篇 npm安裝依賴報錯：permission denied，錯誤信息大致如下： npm ERR!...
Element iView Vuex Mint UI Vant cube-ui，對比六大 vue ui 組件庫，選中最適合的那個。 Element(pc) 介紹 & 版本 餓了么前端團隊開發的桌面端組件庫，當前最新版本：2.4.8 Star：32.067k 項目特色 團隊維護 支持三個版本：vue、react、angular 支持 Nuxt.js 常規支持：多語言、自定義主題、按需引入、內置...
閱讀 1748·2023-04-25 16:28
閱讀 684·2021-11-23 09:51
閱讀 1467·2019-08-30 15:54
閱讀 1148·2019-08-30 15:53
閱讀 2816·2019-08-30 15:53
閱讀 3412·2019-08-30 15:43
閱讀 3249·2019-08-30 11:18
閱讀 3261·2019-08-26 10:25
