vue ssr服务端渲染(小白解惑)

import VueRouter from 'vue-router'
//页面要先声明后使用，不要问为什么
import home from './pages/home'
import store from './pages/store'

Vue.use(VueRouter)
export default new VueRouter({
mode: 'history',
routes:[
{path:'/',name:'home',component:home},
{path:'/store',name:'store',component:store},
]})

再看一下两个页面的代码；

 //store.vue
 <template>
 <div>this is store</div>
 </template>
 <script>
   export default {}
 </script>

改的差不多了，试一哈：

重新打个包webpack –config webpack.server.js

启动node server

>entry-client.js是干啥的

到目前为止还没用到entry-client.js叫客户端配置，不着急使用，先做个测试，写点逻辑试试：
修改下store.vue

//store.vue
<template>
<div @click='run'>{{msg}}</div>
</template>
<script>
 export default {
  data(){
   msg:'this is store'
  },
  created(){
   this.msg = 'this is created'
  },
  mounted(){
   this.msg = 'this is mounted'
  },
  methods: {
   run(){
    alert('this is methods')
   }
  }
 }
</script>

看这个样子页面最终展示的结果应该是this is mounted，然而结果是这样的：

很好解释，服务端对于钩子函数的理解也是很正确的，created会在页面返回之前执行，而mounted是在vue实例成型之后执行，就是页面渲染后，这个是要在客户端才会执行，可是为什么页面出来了没有执行mounted，而且run的点击事件没有生效；

看看页面：

一个js文件都没加载，怎么执行逻辑，就是个静态页面0.0；

这时候entry-client.js就出场了

新增两个文件

//entry-client.js
import { createApp } from './src/app.js';
const { app } = createApp();
app.$mount('#app');

基本配置；

//webpack.client.config.js
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config.js')								 
 5/8   首页 上一页 3 4 5 6 7 8 下一页 尾页