Vue、Node全栈项目~面向小白的博客系统~ (4)

日期：2021-07-29 栏目：程序人生浏览：次

Vue、Node全栈项目~面向小白的博客系统~

就是把pc文件夹里面的放置放到同级

皆大欢喜，做到这里就完成了。接下使用域名就能访问啦

例如我的博客

日志记录

放置到服务器后，出了问题，肯定不像本地开发调试一样方便，所以我们需要「日志记录」，来定位问题

我采用的库是 log4js打不开就得翻墙，我只记录了接口调用记录，需要sql调用记录的可以自行加上 npm i koa-log4

const log4js = require('koa-log4')
const path = require('path')

log4js.configure({
    appenders: {
        api: {
            type: 'dateFile',
            filename: path.resolve(__dirname, 'logs', 'api', 'logging.log'),
            maxLogSize: 1024 * 1024, // 配置文件的最大字节数
            keepFileExt: 3, // 最多保存3天
            layout: {
                type: 'pattern',
                pattern: '%c [%d{yyyy-MM-dd hh:mm:ss}] [%p]：%m%n'
            }
        },
        default: {
            type: 'stdout'
        }
    },
    categories: {
        api: {
            appenders: ['api'],
            level: 'all'
        },
        default: {
            appenders: ['default'],
            level: 'all'
        }
    }
})

process.on("exit", () => {
    log4js.shutdown()
})

const apiLogger = log4js.getLogger("api")

exports.apiLogger = apiLogger

然后创建一个中间件

// apiLoggerMiddleware.js
const { apiLogger } = require('../logger')

// 处理错误的中间件
module.exports = async (ctx, next) => {
    try {
        await next();
    }
    finally {
        apiLogger.debug(`${ctx.method} ${ctx.path} ${JSON.stringify(ctx.body)}`)
    }

};

//init.js
app.use(require('./apiLoggerMiddleware')) // API请求日志
首页加载速度优化

用vue-cli正常打包后，会生成「多个chunk-hash.js 和 chunk-hash.css」，些许增加访问速度，所以我们需要把对应和合为一个

合并chunk-hash.js

在所有异步组件前增加以下代码，目的是把打包的chunk统一

Vue、Node全栈项目~面向小白的博客系统~

合并chunk-hash.css

vue.config.js

module.exports = {
configureWebpack: config => {
     // 公共代码抽离
      config.optimization.splitChunks.cacheGroups = {
        vendor: {
          chunks: 'all',
          test: /node_modules/,
          name: 'vendor',
          minChunks: 1,
          maxInitialRequests: 5,
          minSize: 0,
          priority: 100
        },
        common: {
          chunks: 'all',
          test: /[\\/]src[\\/]js[\\/]/,
          name: 'common',
          minChunks: 2,
          maxInitialRequests: 5,
          minSize: 0,
          priority: 60
        },
        styles: {
          name: 'styles',
          test: /\.(le|sa|sc|c)ss$/,
          chunks: 'all',
          reuseExistingChunk: true,
          minChunks: 1,
          enforce: true
        }
      }
    }
}

index.html

「XXX是我的名字」

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="XXX，一名前端工程师，这是我的个人博客，网站文章随便写，想写啥写啥">
    <meta name="keywords" content="个人博客,XXX,前端,技术,WEB,blog,BLOG,搭建博客,前端技术,VUE博客,XXX的博客">
    <meta name="anthor" content="XXX，123456789@qq.com">
    <meta name="robots" content="博客, 前端, blog, 个人博客, XXX, Yong,XXX的博客,web,VUE,React">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="icon" href="http://qiheizhiya.oss-cn-shenzhen.aliyuncs.com/image/favicon.ico">
    
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.css) { %>
    <link
            href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
            rel="stylesheet"
    />
    <% } %>
    <title>漆黑之牙</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    

    
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
    
  </body>
</html>

cdn

vue.config.js

const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
  externals: {
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    "element-ui": "ELEMENT",
  },
  css: [
    'https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css'
  ],
  js: [
    'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
    'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
    'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
    'https://lib.baomitu.com/element-ui/2.13.2/index.js',
    'https://cdn.bootcss.com/axios/0.19.2/axios.min.js'
  ]
}
module.exports = {
chainWebpack: config => {
    // 注入cdn
    config.plugin('html').tap(args => {
      // 生产环境或本地需要cdn时，才注入cdn
      if (isProduction) { args[0].cdn = cdn }
      return args
    })
  },
  configureWebpack: config => {
   config.externals = cdn.externals
  }
}
前端gzip

npm i -d compression-webpack-plugin

vue.config.js

//也是在configureWebpack中
//gzip压缩
  config.plugins.push(new CompressionPlugin({
    filename: '[path].gz[query]',
    //压缩算法
    algorithm: 'gzip',
    //匹配文件
    test: /\.js$|\.css$|\.html$|\.woff$|\.ttf$|\.eot$|/,
    //压缩超过此大小的文件,以字节为单位
    threshold: 1024,
    minRatio: 0.8,
    //删除原始文件只保留压缩后的文件
    deleteOriginalAssets: isProduction
  }))

「完整配置请自行看client中的vue.config.js」

优化前：1M带宽才首屏加载「10多秒」

优化后：正常情况下首屏加载「1，2秒」

最后

不知不觉写的太多了

项目无模板，纯手写

分享自己的一个全栈简单项目给大家，有什么建议/bug/优化可以提一下，感谢！！。

如果看到这里，就请帮忙点个star吧！！

喜欢技术的也可以加我，一起进步。

邮箱: 953136447@qq.com

微信号：qwer880620

转载注明出处：https://www.heiqu.com/zyfzwf.html

Vue、Node全栈项目~面向小白的博客系统~ (4)

相关推荐