最近在搞vue骨架屏的搭建，網上查了很多資料。基本都可以正常搭建起來，就是過程中遇到很多錯誤，特地記錄下

來說說主要遇到的問題

1.因為原先沒做過ssr，所以要先安裝 vue-server-renderer ，並且vue的版本要和vue-server-renderer的版本一直，所以安裝的時候直接npm install vue vue-server-renderer --save (版本不一致的話，到時候會報vue和vue-server-rendere版本不一致)

2.在生成skeleton.json檔案的時候，需要執行webpack --config ./webpack.skeleton.conf.js ，這個時候會報沒有webpack命令，需要執行node_modules/.bin/webpack --config ./webpack.skeleton.conf.js 

3.在執行node skeleton.js的時候，有報未安裝 webpack-node-externals ，需要安裝 npm install webpack-node-externals --save-dev

4.執行node skeleton.js的時候有時候會報錯，需要安裝npm install vue-template-compiler

5.最後執行node skeleton.js的時候會將模板注入到index.html，我們要先npm run build ,然後將內容注入到編譯後的index.html，也就是skeleton.js中的注入路徑需要改成  

// 讀取`skeleton.json`，以`index.html`為模板寫入內容

const renderer = createBundleRenderer(resolve(__dirname, './dist/skeleton.json'), {

template: fs.readFileSync(resolve(__dirname, './dist/index.html'), 'utf-8')

})

// 把上一步模板完成的內容寫入（替換）`index.html`

renderer.renderToString({}, (err, html) => {

fs.writeFileSync('./dist/index.html', html, 'utf-8')

})

如果注入的是未編譯的，編譯後會無法執行vue，會報錯，導致頁面一直在骨架屏