More Related Content
Similar to Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話 (20)
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
- 23. if (err && err.code === 404) {
res.status(404).end('404 | Page Not Found')
}
- 32. PC/SP用エントリーポイントをそれぞれ用意
// webpack.config.client.js
entry: {
'polyfills': [path.join(..., 'app/entry/polyfills.js')],
'vendor': [path.join(..., 'app/entry/vendor.js')],
'app.pc': [path.join(..., 'app/entry/pc/client-entry.js')],
'app.sp': [path.join(..., 'app/entry/sp/client-entry.js')]
},
// webpack.config.server.js
entry: {
'server-bundle.pc': path.join(..., 'app/entry/pc/server-entry.js'),
'server-bundle.sp': path.join(..., 'app/entry/sp/server-entry.js')
}
- 34. createRendererでレンダラを2つ作成
// server.js
const bundle = {
pc: fs.readFileSync(resolve('./dist/js/server-bundle.pc.js'), 'utf-8'),
sp: fs.readFileSync(resolve('./dist/js/server-bundle.sp.js'), 'utf-8')
}
const template = {
pc: fs.readFileSync(resolve('./dist/index.pc.html'), 'utf-8'),
sp: fs.readFileSync(resolve('./dist/index.sp.html'), 'utf-8')
}
renderer = {
pc: createRenderer(bundle.pc, template.pc),
sp: createRenderer(bundle.sp, template.sp)
};
- 41. import Vue from 'vue'
import Component from 'vue-class-component'
@Component({
props: {
propMessage: String
}
})
export default class App extends Vue {
// initial data
msg = 123
// use prop values for initial data
helloMsg = 'Hello, ' + this.propMessage
// lifecycle hook
mounted () {
this.greet()
}
...
}
- 42. import { createDecorator } from 'vue-class-component';
export const Options = createDecorator((options) => {
Object.assign(options, {
...
watch: {
// call again the method if the route changes
'$route': 'routeUpdated'
}
};
});
- 46. export default {
name: 'App',
metaInfo: {
title: METAINFO.title,
titleTemplate: METAINFO.titleTemplate,
meta: [
{
vmid: 'og:title',
name: 'og:title',
content: METAINFO.title
},
{
vmid: 'description',
name: 'description',
content: METAINFO.description
}
...
]
}
}