Vue 预渲染，基础配置使用

1. 安装插件 prerender-spa-plugin

   官方 prerender-spa-plugin

2. 修改文件

   1.router 中 mode 修改为 "history"

   

   2. 修改webpack.prod.conf.js

       const PrerenderSPAPlugin = require('prerender-spa-plugin')
       const Renderer =PrerenderSPAPlugin.PuppeteerRenderer
       
       plugins:[
           new PrerenderSPAPlugin({
             //打包之后的文件夹路径
             staticDir: path.join(__dirname, '../dist'),
             //路由 
             routes: [ 
               '/index', 
               '/solution',
               '/solution/distribution',
               '/solution/custom',
               '/solution/newretail',
               '/solution/shop',
               '/solution/develop',
               '/solution/selfsupport',
               '/packprice',
               '/aboutus',
               '/help',
               '/help/details',
               '/apply',
               '/apply/details',
               '/news',
             ],
           }),
       ]
       
   

   

   3. 将引入文件夹 static 的 文件路径 全局修改为 /static , 否则会出现 打包上线之后，页面刷新 文件路径会 error, 特别注意！！！亲

      

   4. 说明一下 网上大多文章，文件路径找不到，修改 assetsPublicPath: '/' 为 assetsPublicPath: './' ,纯属扯淡，不信自己去试试。

      

效果图

1. 打包，生成dist文件夹，里面存放静态文件html

2. 将文件夹放到服务器下，记得为根目录，否则文件路径 error,这里我使用phpstudy, 以下效果图