从0到1构建vueSSR项目之路由的构建

vue开发依赖的相关配置

vue ssr 指南

今天先做客户端方面的配置，明天再做服务端的部分。

那么马上开始吧~

修改部分代码

脚手架生成的代码肯定是不适合我们所用的 所以要修改一部分代码

//app.vue
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
  html,body,#app,#app>*{
    width: 100%;
    height: 100%;
  }
  body{
    font-family: 'avenir', helvetica, arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    font-size: 16px;
    margin: 0;
    overflow-x: hidden;
  }

  img{
    width: 200px;
  }
</style>

修改main.js

main.js 是我们应用程序的「通用 entry」。

在纯客户端应用程序中，我们将在此文件中创建根 vue 实例，并直接挂载到 dom。

但是，对于服务器端渲染(ssr)，责任转移到纯客户端 entry 文件。

main.js 简单地使用 export 导出一个 createapp 函数：

import vue from 'vue';
vue.config.productiontip = false;
import app from './app.vue';
//router store 实例
//这么做是避免状态单例
export function createapp() {

  const app = new vue({
    //挂载router，store
    render: h => h(app)
  })
  //暴露app实例
  return { app };
}

添加vue.config.js配置

webpack的入口文件有两个，一个是客户端使用，一个是服务端使用。

今天只做客户端部分。

  src/vue.config.js
  module.exports = {
    css: {
      extract: false//关闭提取css,不关闭 node渲染会报错
    },
    configurewebpack: () => ({
      entry: './src/entry/client'
    })
  }

根目录创建 entry 文件夹，以及webpack入口代码

  mdkir entry
  cd entry
  创建 入口文件
    client.js 作为客户端入口文件。
    server,js 作为服务端端入口文件。 //先创建不做任何配置
  entry/client.js

    import { createapp } from '../main.js';

    const { app } = createapp();

    app.$mount('#app');

路由和代码分割

添加新路由，这里将存放pages的相关路由

src/pages/router/index.js

/**
 *
 * @method componentpath 路由模块入口
 * @param {string} name 要引入的文件地址
 * @return {object}
 */
function componentpath (name = 'home'){
  return {
    component:() => import(`../${name}/index.vue`)
  }
}

export default [
  {
    path: '/home',
    ...componentpath(),
    children: [
      {
        path: "vue",
        name: "vue",
        ...componentpath('home/vue')
      },
      {
        path: "vuex",
        name: "vuex",
        ...componentpath('home/vuex')
      },
      {
        path: "vuecli3",
        name: "vuecli3",
        ...componentpath('home/vuecli3')
      },
      {
        path: "vuessr",
        name: "vuessr",
        ...componentpath('home/vuessr')
      }
    ]

  }
]

src/router.config.js作为路由的总配置 易于管理

//路由总配置
  import vue from 'vue';
  import vuerouter from 'vue-router';

  vue.use(vuerouter);
  //为什么采用这种做法。
  //如果以后有了别的大模块可以单独开个文件夹与pages平级
  //再这里导入即可。这样易于管理

  // pages
  import pages from './pages/router';

  export function createrouter() {
    return new vuerouter({
      mode: 'history',
      routes: [
        {
          path: "*",
          redirect: '/home/vue'
        },
        ...pages
      ]
    })
  }

更新main.js

import vue from 'vue';
vue.config.productiontip = false;
import app from './app.vue';
+ import { createrouter } from './router.config.js'
//router store 实例
//这么做是避免状态单例
export function createapp() {
+  const router = createrouter()
  const app = new vue({
+    router,
    render: h => h(app)
  })
  //暴露app,router实例
  return { app, router };
}

更新 client.js

由于使用的路由懒加载，所以必须要等路由提前解析完异步组件，才能正确地调用组件中可能存在的路由钩子。

// client.js
import { createapp } from '../main.js';

const { app, router } = createapp();

router.onready( () => {
  app.$mount('#app');
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。