前言

因为自己写一个开源项目,需要实现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,使用,这才是真正永驻的布局。

 title=

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

请输入图片描述

不会就我才知道吧(雾),今天第一次玩nuxt.js这个玩意。


结尾

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

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

加油.jpg

最后修改:2022 年 05 月 08 日
如果觉得我的文章对你有用,请随意赞赏