vueSSR: 從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');
})

最近有點事情 vuex 部分後續再作

項目github地址
項目公網地址

1) vueSSR: 從0到1構建vueSSR項目 --- 初始化
2) vueSSR: 從0到1構建vueSSR項目 --- 路由的構建
3) vueSSR: 從0到1構建vueSSR項目 --- node以及vue-cli3的配置
4) vueSSR: 從0到1構建vueSSR項目 --- vuex的配置（數據預取）
5) vueSSR: 從0到1構建vueSSR項目 --- 開發環境的部署
6) vueSSR: 從0到1構建vueSSR項目 --- 僞熱更新