vue、对于开发单页应用来说带来了很好的情况
Vue为开发单页应用程序带来了良好的用户体验，但也有缺点，例如主页加载速度慢，白屏或SEO问题。为什么会这样？我们以前开发过像这样的单页应用程序seo优化缓存插件，例如，主页.html页面可能如下所示：
DOCTYPE html> <html> <head> <title>webpack+vue项目架构title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> head> <body> <div id="app"> div> body> html>
在理解之前，我们和以前一样，让我们简单介绍一下整个项目结构，以便我们有一个简单的理解：
### 目录结构如下： demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包 | |--- app | | |---index | | | |-- views # 存放所有vue页面文件 | | | | |-- home.vue | | | | |-- index.vue | | | | |-- java.vue | | | | |-- node.vue | | | |-- components # 存放vue公用的组件 | | | |-- js # 存放js文件的 | | | |-- app.js # vue入口配置文件 | | | |-- router.js # 路由配置文件 | |--- views | | |-- index.html # html文件 | |--- webpack.config.js # webpack配置文件 | |--- .gitignore | |--- README.md | |--- package.json | |--- .babelrc # babel转码文件
然后我们将通过打包将单页应用程序中的入口文件打包为一个js文件，配置如下：
module.exports = { // 入口文件 entry: { main: './app/index/app.js' }, output: { filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash].js' : 'bundle.js', // 将输出的文件都放在dist目录下 path: path.resolve(__dirname, 'dist') }, plugins: [ new HtmlWebpackPlugin({ hash: true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。 template: './views/index.html' // 模版文件 }), new ClearWebpackPlugin(['dist']), new ExtractTextPlugin("style.css"), ] };
基本配置代码如上所示。它会在项目中使用//.html作为模板页面，然后将css文件样式和js文件自动打包到.html文件中。打包的文件代码如下：
dist / .html的源代码如下：
DOCTYPE html> <html> <head> <title>webpack+vue项目架构title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <link href="style.css?26aab5a9debce5432af2" rel="stylesheet">head> <body> <div id="app"> div> <script type="text/javascript" src="bundle.js?26aab5a9debce5432af2">script>body> html>
对于上面打包的.html文件，我们可以看到页面上仅使用了一个div，然后是一个样式文件和一个js文件。没什么。
然后上面的代码，我们可以很容易地想到以下缺点：首先：SEO不友好，也就是说，我无法通过百度或搜索引擎搜索网站首页，其次是：easy为什么会有白屏？由于我页面中的所有内容都是通过.js动态加载的，因此在浏览器加载和解析期间，该页面始终为空白。这就是我们所说的白屏。当然，对于我们的主页，加载也非常慢。因此，为了解决此问题，有一个插件-spa-可以解决这些问题。
在使用此插件之前，让我们了解一下之前我们是如何进行SEO优化的？我们很早就使用语法来编写页面，然后在编写之后将页面部署到开发侧，因此这将不得不折腾，而且我们的前端开发成本也很高。
第二种方法是使用SSR技术（服务器端渲染），例如Nuxt.js。主要思想是通过Node.js完成渲染逻辑，然后将html视图直接返回给客户端。这种方式也可以解决SEO问题。但是开发成本还是比较大的。例如，您需要考虑Node.js环境中的内存泄漏，运行速度，并发压力和其他问题。另外，开发成本增加并且开发周期变长。因此，我们有一个插件可以解决seo和第一次屏幕加载的问题。
2.如何使用-spa-？
1.安装命令如下：
npm install prerender-spa-plugin --save-dev
2.需要在我们的..js中进行如下配置：
const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; var config = { // 入口文件 entry: { main: './app/index/app.js' }, output: { filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash].js' : 'bundle.js', // 将输出的文件都放在dist目录下 path: path.resolve(__dirname, 'dist') }, module: { // .... }, resolve: { extensions: ['*', '.js', '.json', '.vue', '.styl'] }, devtool: 'cheap-module-eval-source-map', devServer: { // .... }, plugins: [ new HtmlWebpackPlugin({ hash: true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。 template: './views/index.html' // 模版文件 }), new ClearWebpackPlugin(['dist']), new ExtractTextPlugin("style.css"), // ..... ] } // 这里判断 如果是 正式环境打包的话，就使用该插件 if (process.env.NODE_ENV === 'production') { config.plugins.push( new PrerenderSPAPlugin({ staticDir: path.join(__dirname, '/dist'), // 列出需要预渲染的路由 routes: [ '/home' ], renderer: new Renderer({ inject: { foo: 'bar' }, // 监听到自定事件时捕获 renderAfterDocumentEvent: 'render-event' }) }) ) } module.exports = config;
让我们了解以下几种配置的含义：
：指预渲染输出的页面地址。
：指需要预先呈现的路由地址。
：指使用的渲染引擎。当前使用V 3. 4. 0版本支持。
：是指在预渲染过程中可获得的值。可以通过此值来判断是否需要呈现代码的这一部分。例如，以下代码：
isshowRender() { if(window.__PRERENDER_INJECTED && window.__PRERENDER_INJECTED.foo =='bar') return; this.message = '我是测试预加载拦截'; }
上面执行的方法中的代码将不会呈现。
发泄的意思是监视。事件，并决定何时开始预渲染。
3.因此，我们的app.js中的代码应更改为以下内容：
import Vue from 'vue'; import Index from './views/index'; // 引入路由 import router from './router'; new Vue({ el: '#app', router: router, render: h => h(Index), mounted() { document.dispatchEvent(new Event('render-event')) } });
实例化新的Vue时，将代码添加到生命周期：。（new（'-'）），触发事件以呈现。
4.路由配置（.js）：
import Vue from 'vue'; import VueRouter from 'vue-router'; // 引入组件 import home from './views/home'; import path from 'path'; // 告诉 vue 使用 vueRouter Vue.use(VueRouter); const routes = [ { path: '/home', name: 'home', component: resolve => require(['./views/home'], resolve), // 子路由 children: [ { path: 'java', name: 'java', component: resolve => require(['./views/java'], resolve) }, { path: 'node', name: 'node', component: resolve => require(['./views/node'], resolve) } ] }, { path: '*', // 其他没有的页面都重定向到 home页面去 redirect: '/home' } ] var router = new VueRouter({ mode: 'history', // 访问路径不带井号 需要使用 history模式 // base: path.resolve(__dirname, '/app/index'), // 配置单页应用的基路径 routes: routes }); export default router;
据说上述路由配置已更改为mode：''此模式将由插件呈现。
当我们认为配置成功时，当我们在项目的根目录中运行npm run时，我们发现报告了打包错误，如下所示：
/thumb.jpg)
不是。运行“ npm”或“ yarn”会提示此类信息。我们可以根据此信息搜索百度，以查看错误是什么。在获得百度搜索结果后，它们意味着我们需要安装此插件，但是该插件的安装也是有条件的。我们需要使用国内资源。以下命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm i puppeteer
如下所示：
安装所有组件后，我们可以再次运行npm run，并且可以看到在dist目录中将生成一个附加的主文件夹，该文件夹包含一个.html文件，如下所示：
生成完成后，我们检查dist / home / .html页面，如下所示：
DOCTYPE html><html><head> <title>webpack+vue项目架构title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <link href="style.css?e8ed6db9e5869aa22ba2" rel="stylesheet"><script charset="utf-8" src="1.465ef3291c29aadf53df.js">script>head> <body> <div id="app"><header><li class="router-link-exact-active router-link-active">Homeli> <a href="/home/java" class="">javaa> <a href="/home/node" class="">nodea>header> <div class="home-container"><h1>欢迎来到Homeh1> <p>我是Home组件p> div>div> <script type="text/javascript" src="main.5aea82d6c5e9feeac132.js?e8ed6db9e5869aa22ba2">script> body>html>
如上面的代码所示，我们可以看到确实渲染了路由/ home的所有静态页面。因此，要实现SEO，已经解决了页面不会白屏的问题。
源代码视图