今天在做公交的時候沒幹，用手機看看文章，偶然發現了一個關於Vue優化seo的文章，我先是在Vue的官方文檔看了一篇關於Vue做SEO優化的文章。

　　上面提到了nuxt.js這個框架，這個框架我做過一個小項目，確實是可以做服務端渲染，但是這個需要在服務器啟動服務，當時我是用的docker，然後用node+nginx做了個容器，然後用pm2做進程守護。

後面我拿原來的Vue項目做了一個對比發現確實是加載速度要比原來的快很多。

　　後面我又發現有個預渲prerender-spa-plugin染的東西，然後早上到了公司，就想反正我手上也有個項目，順便嘗試一把，在嘗試的時候發現這個配置更簡單，效果也是一樣的好。

　　首先需要安裝包

npm i prerender-spa-plugin -S

　　然後就是修改 build --> webpack.prod.conf.js 的配置。

const webpackConfig = merge(baseWebpackConfig, {
    。。。。。。
    plugins: [
        。。。。。。
        
        // 預渲染
        new PrerenderSpaPlugin(
          // 生成文件的路徑，此處與webpack打包地址一致
          path.join(config.build.assetsRoot), // config.build.assetsRoot為vue cli生成的配置，打包後的文件地址
          // 配置要做預渲染的路由，只支持h5 history方式
          [‘/‘, ‘/ssr‘]
        )
    ]
})
 

　　然後運行npm run build 這個時候你會發現 dist 的這個文件夾會多一個ssr的文件，這個就是預處理遇到用到的，還有就是index也是跟原來的不一樣的。

　　然後我們可以用node搭個簡易的本地服務器運行下。運行後的頁面跟開發環境是一樣的，但是你可以右鍵查看源碼，這個時候你會發現頁面是渲染好了輸出回來的。

　　可能會遇到的問題

　　　我在縣上的時候遇到了一個報錯但是不影響正常的使用

webpackJsonp is not defined

　　然後我就在網上各種搜索，但是很多的方法都不行，這個的原因是應為有公共的js沒有被優先引入造成的。

　　後面我無意間看了buid出來的index.html的源碼，發現一個地方

　　這裏的js是異步加載的，所以可能是異步導致了加載的順序有問題。

　　然後我果斷的把async 改成了 defer 然後又嘗試了一波。

　　發現問題居然巧妙的解決了！！！！

　　至於開發模式的時候使用服務端渲染也沒什麽大的作用，所以就沒有去研究了，就只是把編譯的時候弄了。希望對大家有用把。

用prerender-spa-plugin插件Vue項目優化SEO做ssr服務端渲染及預渲染