配置Vuepress config.js

经过几天的建设，博客已初见雏形，正式上线啦。写此文章庆祝一下，顺便记录一下遇到了哪些坑，使用了什么解决办法(其实是补充一下学习板块的空白，不然就变成游戏评测网站了。。。

CDN加速

第一次打包部署的时候发现app.js有800k，除了vuepress的基本组件还有一个体积庞大的element-ui，这个体积的包对于我的小水管服务器实在是遭不住。便决定用CDN引入vue和element-ui的包。

//config.js 首先在config.js中把 vue 和 element忽略打包
configureWebpack:{
  externals: {
    'vue': 'Vue',
    'element-ui':'ELEMENT'
  }
},

//然后在head标签中引入cdn地址，具体的地址可以在https://www.bootcdn.cn/中查询
//element 必须在vue后引入
head: [
  ['link',{rel: 'stylesheet',href:
  'https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css'}],
  ['script',{src: 'https://cdn.bootcss.com/vue/2.6.10/vue.min.js'}],
  ['script',{src: 'https://cdn.bootcss.com/element-ui/2.12.0/index.js'}]
],

//然后记得删除 import Element 的代码

完成后再次build打包，app.js的体积只有50k，缩小了十倍以上。首页几乎可以做到秒加载。

跨域问题

由于我给博客加了后端程序，所以要解决跨域问题，当然博主是个弟弟，并不是很懂跨域问题。只是知道怎么配置。。。在我的理解里，前端和后端程序端口和地址都可以不一样，通过设置代理，使前端请求可以正确找到后端的地址。

//config.js 中配置devServer, 以/api开头的请求才会代理
devServer: {
  proxy:{
    '/api': {
      target: "http://localhost:4000",   //跨域访问的地址
      ws: true,    //是否启用websockets
      changeOrigin: true,    //target可以是域名
    }
  }
}

最后更新时间

vuepress默认主题提供一个设置是在文章右下角显示文章的最后更新时间。也是你最后一次提交该文件到github上的时间。配置非常简单。 themeConfig中配置 lastUpdated: ‘最后更新’

//config.js 这样配置效果为  最后更新:2019-12-25 23:17:33
themeConfig: {
  lastUpdated: '最后更新',
},

可以自定义显示日期的格式，这样配置效果为最后更新:2019-12-25

//config.js
plugins: [
 [
   '@vuepress/last-updated',
   {
     transformer: (timestamp, lang) => {     //timestamp是时间戳
       const moment = require('moment')
       moment.locale(lang)       //lang是指语言，默认是en-us
       return moment(timestamp).format("YYYY-MM-DD")  //format可以自定义格式
     }
   }
 ]
]

长路漫漫

总算完成了之前的目标，初步搭建好了自己的博客和视频站，还是很有成就感的。希望我慢慢地将他建设的更好，也希望我能坚持写文章、写日记、写笔记的习惯。

2019-12-26凌晨，陪电脑过圣诞