Vue 骨架屏搭建遇到的坑

最近在搞vue骨架屏的搭建，网上查了很多资料。基本都可以正常搭建起来，就是过程中遇到很多错误，特地记录下

搭建过程参考链接 https://segmentfault.com/a/1190000014832185 

来说说主要遇到的问题

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，会报错，导致页面一直在骨架屏