vue预渲染

最新推荐文章于 2024-05-16 21:57:17 发布

三和小钢炮

最新推荐文章于 2024-05-16 21:57:17 发布

阅读量516

点赞数

分类专栏： vue 文章标签：预渲染 seo 服务端渲染 prerender-spa-plugin

本文链接：https://blog.csdn.net/fwx426328/article/details/100901651

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. vue要预渲染

vue项目的html页面一般如下：

  <body>
    <div id="app"></div>
  	<script type="text/javascript" src="/app.js"></script>
  </body>

通过前端渲染的方法无法让搜索引擎抓取。所以要将一些页面先渲染出来。

2. vue做seo的方法

一般可以用服务端渲染，不过要node服务器。

服务端渲染
预渲染

我的项目是java的，所以我用预渲染。

3. vue预渲染的方法

将vue-router改成history

new VueRouter({
  mode: 'history'
});

后台修改
找不到静态资源路径就返回index.html，重定向即可。
安装prerender-spa-plugin

npm install prerender-spa-plugin --save

在vue.config.js加入配置

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

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return;
    return {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          // 要渲染的路由
          routes: ['/login', '/index/home'],
          renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
            renderAfterTime: 5000
          })
        }),
      ],
    };
  }
}

编译打包

npm run build

编译后的文件如下：

.
├── index
│   ├── home
│   └── index.html
├── index.html
└── login
    └── index.html

三和小钢炮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
vue预渲染

1. vue要预渲染vue项目的html页面一般如下： <body> <div id="app"></div> <script type="text/javascript" src="/app.js"></script> </body>通过前端渲染的方法无法让搜索引擎抓取。所以要将一些页面先渲染出来...
复制链接

扫一扫