基于 JSON 构建博客(AcyOrt/Vue/Vuex/Webpack)

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2561 天前的主题，其中的信息可能已经有所发展或是发生改变。

尝试使用 AcyOrt 的 JSON 输出功能构建一个博客，顺便用了 vue + webpack 组合开发。

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

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

内容 JSON

使用 AcyOrt 将项目 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: https://github.com/erm0l0v/webpack-md5-hash/issues/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 模式，参考这里: https://github.com/LoeiFy/Recordum/issues/15

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

7 条回复 • 2017-10-25 18:35:39 +08:00