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

2023-08-27 02:12:04 156

vue开发依赖的相关配置

VueSSR指南

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

那么马上开始吧~

修改部分代码

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

//App.vue

修改main.js

为什么要这么做？为什么要避免状态单例

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

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

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

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

importVuefrom'vue';
Vue.config.productionTip=false;
importAppfrom'./App.vue';
//routerstore实例
//这么做是避免状态单例
exportfunctioncreateApp(){

constapp=newVue({
//挂载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入口代码

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

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

const{app}=createApp();

app.$mount('#app');

路由和代码分割

官方说明的已经很清楚了，我就不做过多介绍了，下面直接展示代码

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

src/pages/router/index.js

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

exportdefault[
{
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作为路由的总配置易于管理

//路由总配置
importVuefrom'vue';
importVueRouterfrom'vue-router';

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

//pages
importpagesfrom'./pages/router';

exportfunctioncreateRouter(){
returnnewVueRouter({
mode:'history',
routes:[
{
path:"*",
redirect:'/home/vue'
},
...pages
]
})
}

更新main.js

importVuefrom'vue';
Vue.config.productionTip=false;
importAppfrom'./App.vue';
+import{createRouter}from'./router.config.js'
//routerstore实例
//这么做是避免状态单例
exportfunctioncreateApp(){
+constrouter=createRouter()
constapp=newVue({
+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');
})

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

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

热门推荐

随机推荐