从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');
})

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

(0)

相关推荐

  • Vue SSR 组件加载问题

    Node 端渲染提示 window/document 没有定义 业务场景 首先来看一个简单的 Vue 组件 test.vue <template> <div> <h2>clientHeight: {{ clientHeight }} px </h2> </div> </template> <script type="text/babel"> export default { data(){ return

  • 浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验

    引言 Memory Leak 是最难排查调试的 Bug 种类之一,因为内存泄漏是个 undecidable problem,只有开发者才能明确一块内存是不是需要被回收.再加上内存泄漏也没有特定的报错信息,只能通过一定时间段的日志来判断是否存在内存泄漏.大家熟悉的常用调试工具对排查内存泄漏也没有用武之地.当然了,除了专门用于排查内存泄漏的工具(抓取Heap之类的工具)之外. 对于不同的语言,各种排查内存泄漏的方式方法也不尽相同.对于 JavaScript 来说,针对不同的平台,调试工具也是不一样的

  • 基于vue-ssr服务端渲染入门详解

    第一部分 基本介绍 1.前言 服务端渲染实现原理机制:在服务端拿数据进行解析渲染,直接生成html片段返回给前端.然后前端可以通过解析后端返回的html片段到前端页面,大致有以下两种形式: 1.服务器通过模版引擎直接渲染整个页面,例如java后端的vm模版引擎,php后端的smarty模版引擎. 2.服务渲染生成html代码块, 前端通过AJAX获取然后使用js动态添加. 2.服务端渲染的优劣 服务端渲染能够解决两大问题: 1.seo问题,有利于搜索引擎蜘蛛抓取网站内容,利于网站的收录和排名.

  • 详解vue服务端渲染(SSR)初探

    前言 首先来讲一下服务端渲染,直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回给前端.具体用法也有很多种比如: 传统的服务端模板引擎渲染整个页面 服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加 服务端渲染的优劣 首先是seo问题,前端动态渲染的内容是不能被抓取到的,而使用服务端渲染就可以解决这个问题.还有就是首屏加载过慢这种问题,比如在SPA中,打开首页需要初始加载很多资源,这时考虑在首屏使用服务端渲染,也是一种折中的优化方案.但是使用SSR时,势必会增加服

  • 简单的Vue SSR的示例代码

    前言 最近接手一个老项目,典型的 Vue 组件化前端渲染,后续业务优化可能会朝 SSR 方向走,因此,就先做些技术储备.如果对 Vue SSR 完全不了解,请先阅读官方文档. 思路 Vue 提供了一个官方 Demo,该 Demo 优点是功能大而全,缺点是对新手不友好,容易让人看蒙.因此,今天我们来写一个更加容易上手的 Demo.总共分三步走,循序渐进. 写一个简单的前端渲染 Demo(不包含 Ajax 数据): 将前端渲染改成后端渲染(仍然不包含 Ajax 数据): 在后端渲染的基础上,加上 A

  • 通过vue-cli3构建一个SSR应用程序的方法

    1.前沿 1.1.什么是SSR SSR(服务端渲染)顾名思义就是将页面在服务端渲染完成后在客户端直接展示. 1.2.客户端渲染与服务端渲染的区别 传统的SPA模式 即客户端渲染的模式 Vue.js构建的应用程序,默认情况下是有一个html模板页,然后通过webpack打包生成一堆js.css等等资源文件.然后塞到index.html中 用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 ->

  • VUE基于NUXT的SSR 服务端渲染

    Server Side Rendering(服务端渲染) SSR 目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息. 原理 将 html 在服务端渲染,合成完整的 html 文件再输出到浏览器. 适用场景 客户端的网络比较慢 客户端运行在老的或者直接没有 JavaScript 引擎上 NUXT 作用就是在 node.js 上进一步封装,然后省去我们搭建服务端环境的步骤,只需要遵

  • vue ssr 指南详读

    本帖说明 该贴是对vue SSR Guide解读和补充,对于官网文档已有内容会以引用方式体现.由于官网demo在国内无法运行,该贴最后也提供了一个完整的可以运行的demo,帖子中提到的代码均是来自于该demo,供学习交流. 介绍 什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"

  • Vue基于NUXT的SSR详解

    本文介绍了Vue基于NUXT的SSR,分享给大家,也给自己留个笔记. SSR 首先说下 SSR,最近很热的词,意为 Server Side Rendering(服务端渲染),目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息. 抓取页面的前提是 html 含有被抓取内容,我们不妨看看基于 vue 的线上 SPA 页面请求时返回了什么 <!DOCTYPE html> <ht

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

    vue开发依赖的相关配置 Vue SSR 指南 今天先做客户端方面的配置,明天再做服务端的部分. 那么马上开始吧~ 修改部分代码 脚手架生成的代码肯定是不适合我们所用的 所以要修改一部分代码 //App.vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default

  • 如何构建 vue-ssr 项目的方法步骤

    如何通过 web 服务器去渲染一个 vue 实例 构建一个极简的服务端渲染需要什么 web 服务器 vue-server-renderer vue const Vue = require('vue') const Koa = require('koa') const app = new Koa() const Router = require('koa-router') const router = new Router() const renderer = require('vue-serve

  • 从0到1构建vueSSR项目之node以及vue-cli3的配置

    前言 上一次做了路由的相关配置,原本计划今天要做vuex部分,但是想了想,发现vuex单独的客户端部分穿插解释起来很麻烦,所以今天改做服务端部分. 服务端部分做完,再去做vuex的部分,这样就会很清晰. vue ssr是分两个端,一个是客户端,一个是服务端. 所以要做两个cli3的配置. 那么下面就直接开始做吧. 修改package.json的命令 //package.json :client代表客户端 :server代表服务端 //使用VUE_NODE来作为运行环境是node的标识 //cli

  • Eclipse 使用Maven构建SpringMVC项目

    首先Eclipse需要安装Maven的插件,地址:http://m2eclipse.sonatype.org/sites/m2e. 用MyEclipse安装Maven插件,建出的Maven项目有些问题.一是,发布tomcat的时候resources总是不会被发布到tomcat下:二是,把WEB-INF下的classes改到target下的classes,但是不知道为什么MyEclipse要么仍然在WEB-INF下生成class.要么真不在WEB-INF生成classes了但是发布tomcat的时

  • Vue 2.0在IE11中打开项目页面空白的问题解决

    前言 因为工作的需要,学习Vue2.0也有一段时间,最近在用Vue2.0的官方脚手架工具构建的项目,chrome中跑一直没有问题,但ie11打开出现了bug: 问题 ie11打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser: 原因 Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator.Generator.Set.Maps.Proxy.Reflec

  • Android中使用Gradle来构建App项目的入门指南

    gradle是Android开发中引入的全新的构建系统,因为全新的构建系统主要是出于下面的目的: 1. 方便复用代码和资源 2. 构建多种版本的apk更见简单,不论是为多渠道构建不同的apk还是构建不同环境的apk(debug,release) 3. 方便配置,扩展,自定义构建过程 4. 良好的IDE集成 为什么选择Gradle? Gradle主要有以下几个有点: 1. 使用领域驱动语言(DSL)来描述构建逻辑 2. 构建脚本使用Groovy,可以方便的定制构建逻辑 3. 内建的依赖管理系统,使

  • VueCli3构建TS项目的方法步骤

    使用vue-cli3构建Typescript项目 import 和 require require: 以同步的方式检索其他模块的导出 (开发) import: 动态地加载模块 (生产) 相关文档:module methods vue-cli3 vue create project-name vue-cli3配置, 生成目录结构: │ .browserslistrc │ .gitignore │ .postcssrc.js // postcss 配置 │ babel.config.js │ cyp

  • springboot学习之构建简单项目搭建步骤详解

    概述 相信对于Java开发者而言,spring和springMvc两个框架一定不陌生,这两个框架需要我们手动配置的地方非常多,各种的xml文件,properties文件,构建一个项目还是挺复杂的,在这种情况下,springboot应运而生,他能够快速的构建spring项目,而且让项目正常运行起来的配置文件非常少,甚至只需要几个注解就可以运行整个项目. 总的说来,springboot项目可以打成jar包独立运行部署,因为它内嵌servlet容器,之前spring,springMvc需要的大量依赖,

  • vue-cli构建vue项目的步骤详解

    构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli .前端的三大框架都有自己的脚手架工具,其作用就是用配置好的模板迅速搭建起一个项目工程来,省去自己配置 webpack 配置文件的基本内容,大大降低了初学者构建项目的难度.这节我们看看如何使用 vue-cli 构建 vue 项目以及对构建项目的具体分析. 一.环境搭建 node 和 npm 是必不可少的,这里不再介绍. 1.安装 vue-cli $ npm install -g vue-cli 检查是否安装成功: $ vue -

  • vue-cli3单页构建大型项目方案

    一.vue-cli3单页面构建方案 1.在目标文件夹内执行 vue ui ; 一个ui版界面,用于创建vue项目: 2.打开router文件夹内的index,看情况配置router的模式,是默认的hash还是history?ps:个人推介history模式,因为内嵌如app的H5页面的话,有可能某些app是不允许页面上带有'#'的,而hash会在url上利用#来做路由转发.ps:history模式在发布到服务器上需要nginx配置一下.详情请自行百度. const router = new Vu

随机推荐