有时候我们在学习vue的时候，会开发几个小demo，要是没有云服务器，别人就看不到demo长什么样。不过码云中的pages服务帮我们解决了这个问题。
码云 pages
码云 Pages 是一个免费的静态网页托管服务，您可以使用 码云 Pages 托管博客、项目官网等静态网页。如果您使用过 Github Pages 那么您会很快上手使用码云的 Pages服务。目前码云 Pages 支持 Jekyll、Hugo、Hexo编译静态资源。
pages 服务介绍可以了解我们可以把我们的纯静态网页托管到码云上，就相当于提供了个免费的服务器，不过这个免费的服务器只能存放静态网页。
vue 项目编译
vue的运行需要在服务器上运行，在此之前我们需要先要将vue项目编译，在控制台中，输入以下命令就可以编译
cnpm run build
注意，编译前还需要修改一些路径，防止部署到pages服务上后，导致css,js，字体加载不到。
\build\build.js 中注释掉日志打印
if (stats.hasErrors()) {
//console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
/*console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))*/
\config\index.js 修改build模块中的路径 为相对路径
image.png
\build\utils.js 新增publicPath: '../../'
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../',
})
} else {
return ['vue-style-loader'].concat(loaders)
}
vue 项目部署到 pages上
使用pages服务其实比较简单，按照以下步骤就可以将我们的项目部署。
- 初始化本地仓库 并将本地仓库关联远程仓库
cd 项目根目录
-- 初始化本地仓库
git init
-- 添加项目文件
git add .
-- 将项目文件加载到暂存区
git commit -m "第一次提交"
-- 关联远程仓库
git add remote origin 码云的地址
-- 提交文件到远程仓库
git push -u origin master
-
项目代码主页 > 服务 > gitee pages
image.png
image.png
如果我们有一个主分支，就直接选择master主分支
部署目录，选择vue编译后的dist文件目录
最后点击更新按钮即可
最终效果
更新完后，页面会展示一个链接，点击这个链接既可以看到我们做的小demo了。
image.png
总结
本文介绍了如何使用码云的pages服务来部署我们的静态网页，对比github的pages服务，使用码云的访问速度肯定会更快。
