1.安裝依賴
npm install vue-server-renderer
npm install vue-skeleton-webpack-plugin
npm install webpack-merge
npm install webpack-node-externals
2.引入依賴SkeletonWebpackPlugin
// webpack.dev.conf.js和webpack.prod.conf.js中加入如下代碼
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
plugins: [
new SkeletonWebpackPlugin({
webpackConfig: require('./webpack.skeleton.conf'),
quiet: true
})
]
// 同級新建webpack.skeleton.conf.js文件
'use strict';
const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const nodeExternals = require('webpack-node-externals')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = merge(baseWebpackConfig, {
target: 'node',
devtool: false,
entry: {
app: resolve('../src/entry-skeleton.js')
},
output: Object.assign({}, baseWebpackConfig.output, {
libraryTarget: 'commonjs2'
}),
externals: nodeExternals({
whitelist: /\.css$/
}),
plugins: []
})
3.在指定的入口文件添加<skeleton/>骨架屏組件（這里是上文的../src/entry-skeleton.js）
import Vue from 'vue';
import Skeleton from './Skeleton';
export default new Vue({
components: {
Skeleton
},
template: '<skeleton />'
});
4.完成運(yùn)行npm run dev
ps:
1.版本不匹配的問題：
Error:
vue packages version mismatch:
-vue@2.5.17
-vue-server-renderer@2.5.21
重新安裝npm install vue-server-renderer@2.5.21
