AcyOrt + VUE + JSON 博客

@LoeiFy 2017-04-21 07:44:03发表于 LoeiFy/Recordum JavascriptVuewebpack

这里使用 AcyOrt 的 JSON 输出插件输出博客内容,基于 vue + webpack 组合开发的一个博客。

DEMO: http://aksdj4.am0200.com/

项目地址: https://github.com/acyortjs/aksdj4

JSON

使用 acyort-json 将项目 Recordum issue 生成 JSON: https://github.com/acyortjs/aksdj4/tree/gh-pages/json

开发说明

基于 webpack 2 + vue 2,值得注意的是 vue-loader 已经包含了 vue-hot-reload-api, vue-style-loader,甚至 postcss,所以 vue 相关的 loader 只需要安装 vue-loader, vue-template-compiler

ES6

因为我并没有用到很多 ES7 以上的特性,只用到 Object rest spread 所以 babel 插件选择了
babel-plugin-transform-object-rest-spread, babel-preset-es2015

CSS 预处理器

这次使用了 postcss,没有选择 sass,因为不需要安装那么久,并且加上对应插件也类似的写法,选择插件有:postcss-cssnext, postcss-import。这里也不需要安装 Autoprefixer,因为 cssnext 自带了

vue

使用了 vue/vue-router/vuex/,没有用 vue-resource,选择了 axios,作者也推荐用 axios: https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4

构建

有几个构建要求,分离相关基础库,修改 js,css 互不影响缓存

分离 css

使用 webpack-md5-hash 插件,使用 contenthash 文件名,保证修改 js 不会影响 css

loaders: {
  postcss: ExtractTextPlugin.extract({
    use: [
      {
        loader: 'css-loader',
        options: {
          minimize: true
        }
      },
      'postcss-loader'
    ],
    fallback: 'vue-style-loader'
  })
}
...
new ExtractTextPlugin('[name].[contenthash:8].css')

提取公共库

基本上不会修改这些基础库

{
  entry: {
    vendors: ['axios', 'vue', 'vuex', 'vue-router']
  }
}
...
new webpack.optimize.CommonsChunkPlugin({
  names: ['vendors', 'manifest']
})

使用 html-webpack-plugin 进行自动生成相应资源路径,然后生成的 html 会有 4 个资源路径

...
<link href="/build.0570f616.css" rel="stylesheet">
...
<script type="text/javascript" src="/manifest.d41d8cd9.js"></script>
<script type="text/javascript" src="/vendors.a2c4ab5a.js"></script>
<script type="text/javascript" src="/build.be4b1392.js"></script>

这里有个问题,虽然现在修改 js,css 文件不会改变,反过来 css 修改 js 也不会改变,但是每次生成的 manifest.xxxxxx.js 可能文件名不一样,但是内容也变化了,这里有一个 issue: erm0l0v/webpack-md5-hash#9

并且这个 manifest.js 是很小的,纪录一些打包模块信息,单独出来产生一个请求觉得不太好,所以这里选择将这个文件 inject 到 html,这样也可以不管上面所说的文件不一致问题

使用 html-webpack-inline-source-plugin 将 manifest inline 到 index.html

new HtmlWebpackPlugin({
  template: 'src/index.html',
  inject: 'body',
  inlineSource: 'manifest+' // 将 manifest 开头的 inline script
})

路由选择

vue-router 也有两种路由模式选择,hash 模式以及 history 模式,history 模式需要服务器支持。因为项目是寄存在 GitHub pages 上,不能配置服务器,但这里还是使用了 history 模式。

因为 GitHub pages 支持 404.html,所以直接将生成的 index.html 复制生成一份 404.html,那么访问不存在路径就直接访问 404.html,就相当于访问 index.html,虽然这时候的 http code 是 404,但整个项目功能并没有受到影响