用 Vue 撸一份线上简历有哪些坑

发表于 更新于 分类于 阅读次数：

昨天花了一天时间，用 Vue 给自己撸了一份线上简历，并借助 Github Pages 实现了在线预览的效果。

目前实现的是最简单的效果，可以说只用了 Vue，不涉及全家桶里其他产品。从 UI、文字、性能、测试等各种角度都有改进的空间。这个小项目应该是会长期维护的。今天先总结一下，做到目前为止遇到的坑。

在 Vue 中使用 sass

这个步骤之前已经总结过，现在再在博客上记录一次，方便之后查找。

在 Webpack 中，所有的预处理器需要匹配相应的 loader。因此要使用 sass 或 scss，首先下载依赖：

1
npm install sass-loader node-sass --save-dev

然后在单文件组件中的<style>标签中加上lang="sass"。vue-loader会根据lang属性推断出要使用的 loaders，并将内容交给相应的 loaders 处理：

1
2
3
<style lang="sass">
  /* write sass here */
</style>

与名称相反，sass-loader 默认解析 scss 语法，因此如果想使用 sass 语法，还需要在 build/vue-loader.conf.js 配置 vue-loader 的选项：

build:vue-loader.conf.png

这样的修改不会影响 scss 的使用，记得修改<style>标签中为lang="scss"即可。

项目资源无法加载

直接npm run build得到的项目，默认引用资源文件的路径为/static/js/app.js。所以程序若不在根目录下，就会出现资源文件引用错误的情况。

最简单的解决方案就是改动 webpack 的配置文件。将/config文件夹中的 index.js 文件中的assetsPublicPath: '/'改为assetsPublicPath: './'即可，截图如下：

config:index.png

如果你还使用了 vue-router，你需要在 router 的配置中加上一行base: '/[项目所在文件夹的名字]/'，如下所示：

router.png

注意：如果启用了 vue-router 的 history 模式，你需要跟着 vue-router 官方文档的后端配置例子 对服务器进行一定的配置。

这是因为在 history 模式下，router 只是通过 JS 操作 window.history 来改变浏览器地址栏里的路径，并没有发起 http 请求。但是直接在地址栏中输入形如http://www.example.com/example/item/1这样的地址时，就一定先要对服务器发起 http 请求。此目标在服务器上不存在，于是会返回 404。修改服务器的配置，以将所有的请求全部转发到index.html上。

当然，这意味着单纯使用 Github Pages 的在线预览功能没办法进行这样的配置。你也可以关注知乎上的这个问题 怎样为Github pages Hack使用了vue-router history模式的vue应用？ - 知乎 来看别人的解决方法。

iconfont 无法加载

字体图标无法正确加载。参考 https://github.com/vuejs-templates/webpack/issues/166 ，得到的解决方法是修改 build/utils.js 文件，增加一行publicPath: '../../'，如截图所示：

build:utils.png

保存后，npm run build打包得到的项目中 iconfont 就可以正常显示了。

实现 Github Pages 在线预览

参考 Configuring a publishing source for GitHub Pages - User Documentation，实现 Github Pages 在线预览功能有好几种方法，可以设置从master分支、gh-pages分支或者master分支下的/docs文件夹中读取。我就选择了最简单的一种方法，把npm run build打包下来的/dist文件夹改名为/docs。

之后，在 Github 项目主页的 Settings 下的 Github pages 下进行设置 Source 为master branch /docs folder即可。

githubpage.png

如果你之前使用过 Github Pages 并绑定了一个域名，那么这个项目的预览地址会像http://kyonhuang.top/resume/这样在这个域名下，看起来很爽。

参考资料

结语

撸这份简历，是一个总结，也是一个激励。

真正撸完简历，才发现自己在技术层面上的项目经历少的可怜，而技术也不敢说有什么掌握。以后看到这份简历，会让我非常想写一些拿得出手的开源项目，然后对项目经历进行修改。

读完《你不知道的JavaScript（中卷）》，就给 JS 的技能条涨 5 个百分点；用 Node 开发一个支持登录注册的后台，就给 Node 的技能条涨 5 个百分点；或者再点亮一个新的技能。

随着我的不断学习，希望这份简历越来越吸引人。