从0到1构建vueSSR项目之路由的构建
作者：绅士
这篇文章主要介绍了从0到1构建vueSSR项目之路由的构建，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue开发依赖的相关配置
今天先做客户端方面的配置，明天再做服务端的部分。
那么马上开始吧~
修改部分代码
脚手架生成的代码肯定是不适合我们所用的 所以要修改一部分代码
//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');
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。