前言

因为自己写一个开源项目，需要实现vue的ssr渲染，更好的支持百度seo，但是现在看了看资源占比，光是启动就要我800mb，只能无奈放弃，百度的seo没有动态抓取js数据的功能。

只能期待bing和谷歌了。

webpack进行gzip压缩打包

 const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: {
        plugins: [
            // 前端压缩gzip功能
            new CompressionPlugin({
                test: /\.(woff|js|css|png|jpg|gif)?$/i, // 哪些文件要压缩
                filename: '[path][base].gz',// 压缩后的文件名--此插件的版本更新为这样了，原始的是 '[path].gz[query]'
                algorithm: 'gzip',// 使用gzip压缩
                minRatio: 1,// 压缩率小于1才会压缩
                deleteOriginalAssets: false // 删除未压缩的文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false
            }),
            // // 预渲染
            // new PrerenderSPAPlugin({
            //     // 生成文件的路径，这个目录只能有一级。若目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动
            //     staticDir: path.join(__dirname, './dist'),
            //     // 对应自己的路由文件
            //     routes: ['/'],
            //     // 若没有这段则不会进行预编译
            //     renderer: new Renderer({
            //         inject: {
            //             foo: 'bar'
            //         },
            //         headless: false,
            //         // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            //         renderAfterDocumentEvent: 'render-event'
            //     })
            // }),
        ]
    },

webpack去除打包后的map文件

vue.config.js 下写入

    productionSourceMap: false,// 删除打包生成后的js的map文件，如 chunk-vendors.0c45bfa2.js.map

webpack完成element-plus按需导入

这些是导入的内容

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const {ElementPlusResolver} = require('unplugin-vue-components/resolvers')

写在vue.config.js 里面的plugins数组里面

            AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),

nuxt.js 实现路由跳转嵌套类似 <router-view>或者路由跳转

相信刚刚使用nuxt.js的人都很疑惑，为什么设置了 <nuxt-like>,<nuxt-child>

都无法正常在页面显示视图，点击后会直接跳转到路由地址，本来应该保存的父布局却直接跳转了了。

这里是因为nuxt.js 引用了一个叫做layouts的视图功能，就如同vue组件一般，当作app.vue，使用，这才是真正永驻的布局。

然后使用layout来引用这个布局，我之所以名字是tabber而不是indexMoblie是因为我做了判断移动端和桌面端进行自适应，用了两套代码布局。

不会就我才知道吧（雾），今天第一次玩nuxt.js这个玩意。

结尾

我放弃了nuxt.js实现ssr渲染了，淦，百度我与你不共戴天。

不过这次写这个项目，我收获挺多的，Go服务器还写了并发限制中件件，重要接口限制中间件，单ip规定时间限制次数中间件。

加油.jpg