vue技巧：解决网页静态化的问题

我们使用vuecli打包出来的vue页面，只有一个html。不错这确实是spa牛逼的地方。
但是对于seo来说，这也是一个致命缺陷。
那就是，完全没法seo。这货连个实体页面都没有。那就很难受了。

此时我们需要借助插件prerender-spa-plugin解决问题。在项目目录输入

cnpm install prerender-spa-plugin -S-d

这里你需要注意一点，你现在需要设置你的route为history模式。当然我们一直是这个模式，之前有人使用hash模式，那个是不可取的。

接着打开webpack.prod.conf.js这个文件在build文件夹中，添加

const PrerenderSpaPlugin = require('prerender-spa-plugin') //静态化

然后还是这个文件，找到plugins，在里面加入

//静态化
new PrerenderSpaPlugin(
    // npm run build的输出目录
    path.resolve(__dirname, '../dist'),
    // 需要进行预渲染的页面
    ['/', '/components','/download','/articleMain','/test'], {
        captureAfterTime: 5000,
        maxAttempts: 10,
    }
)

注意着里面的地址，是生成静态化以后的目录，这里跟你的route地址是对应的。按照你的route来写。

然后重新输入

npm run build

 

重新打包

完成后是这样的

 

每个route页面都生成了静态页面

但是

---

这只是一个治标不治本的解决办法！因为只有route中的页面被生成了静态页面，我们的内容页面是无法生成静态的。那么这该怎么办呢？如果你既想使用vue那简介的语法进行开发，又希望项目能实现cms那样自动生成静态的功能，你就需要用到一个吊炸天的东西—基于vue的nuxt.js来开发！

作者：党云龙
链接：https://www.jianshu.com/p/941ada753d5c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。