您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

VueJS-跨域_骨架屏插件、预渲染、多页应用-Vue预渲染(坑）

发布时间：2020-05-25 18:12:27编辑：雪饮阅读（）

 

老版本解决方案

vue create 05_vue_prerender

我们自定义

Vue CLI v3.6.1

┌───────────────────────────┐

│  Update available: 4.3.1  │

└───────────────────────────┘

? Please pick a preset:

  vuex-test (vue-router, vuex, babel)

  test-vuex (vue-router, vuex, babel, typescript)

  test2 (vuex, typescript)

  test3 (vue-router, vuex, babel, typescript)

  test4 (vue-router, vuex, babel)

  default (babel, eslint)

> Manually select features

我们只用babel和router

Vue CLI v3.6.1

┌───────────────────────────┐

│  Update available: 4.3.1  │

└───────────────────────────┘

? Please pick a preset: Manually select features

? Check the features needed for your project:

 (*) Babel

 ( ) TypeScript

 ( ) Progressive Web App (PWA) Support

 (*) Router

 ( ) Vuex

 ( ) CSS Pre-processors

>( ) Linter / Formatter

 ( ) Unit Testing

 ( ) E2E Testing 

History模式路由选择并且不保存预设

Vue CLI v3.6.1

┌───────────────────────────┐

│  Update available: 4.3.1  │

└───────────────────────────┘

? Please pick a preset: Manually select features

? Check the features needed for your project: Babel, Router

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

? Save this as a preset for future projects? (y/N) N

然后进入项目目录后

安装prerender-spa-plugin

先设置为chrome下载源为淘宝的一个源，不然等会儿安装该渲染插件的时候可能会因为无法翻墙原因导致安装失败

npm config set PUPPETEER_DOWNLOAD_HOST=https://npm.taobao.org/mirrors

然后再安装该预渲染插件

npm i prerender-spa-plugin -D

配置预渲染插件

进入项目根目录建立vue.config.js如

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin');

module.exports = {
    configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
         // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.join(__dirname, 'dist'),
      //设置about组件为预渲染组件，若要设置home组件为预渲染组件，则home默认为“/”添加进去即可
      routes: [ '/about'],
      })
    ]
  }
}

并修改src/views/home、src/views/about组件如

Home.vue

<template>
   <div class="home">
     我是home
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
 import HelloWorld from '@/components/HelloWorld.vue'
 
 export default {
   name: 'Home',
   components: {
     HelloWorld
   }
 }
 </script>

About.vue

<template>
   <div class="about">
     我是about
   </div>
 </template>

配置服务端对该预渲染插件的支持



 

然后npm run build生成代码于dist中并拷贝生成的代码到服务端站点根目录就可以访问该站点进行测试效果了。

 

测试效果

 

强刷about（如果第一次访问则不用）的效果



 

即页面源代码上本来就有字样“我是about”，那么seo优化ok



 

那么反观home强刷



 

其内容中并没有直接显示“我是home”



 

两个组件我们在配置的时候只配置了about的预渲染，所以才会这样哈