有時候我們在學習vue的時候，會開發(fā)幾個小demo，要是沒有云服務器，別人就看不到demo長什么樣。不過碼云中的pages服務幫我們解決了這個問題。

碼云 pages

碼云 Pages 是一個免費的靜態(tài)網(wǎng)頁托管服務，您可以使用 碼云 Pages 托管博客、項目官網(wǎng)等靜態(tài)網(wǎng)頁。如果您使用過 Github Pages 那么您會很快上手使用碼云的 Pages服務。目前碼云 Pages 支持 Jekyll、Hugo、Hexo編譯靜態(tài)資源。

pages 服務介紹可以了解我們可以把我們的純靜態(tài)網(wǎng)頁托管到碼云上，就相當于提供了個免費的服務器，不過這個免費的服務器只能存放靜態(tài)網(wǎng)頁。

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服務其實比較簡單，按照以下步驟就可以將我們的項目部署。

• 初始化本地倉庫 并將本地倉庫關聯(lián)遠程倉庫

cd 項目根目錄

-- 初始化本地倉庫
git init

-- 添加項目文件
git add .

-- 將項目文件加載到暫存區(qū)
git commit -m "第一次提交"

-- 關聯(lián)遠程倉庫
git add remote origin 碼云的地址

-- 提交文件到遠程倉庫
git push -u origin master

• 項目代碼主頁 > 服務 > gitee pages

  
  
  image.png

image.png

• 如果我們有一個主分支，就直接選擇master主分支

• 部署目錄，選擇vue編譯后的dist文件目錄

• 最后點擊更新按鈕即可

最終效果

更新完后，頁面會展示一個鏈接，點擊這個鏈接既可以看到我們做的小demo了。

image.png

總結

本文介紹了如何使用碼云的pages服務來部署我們的靜態(tài)網(wǎng)頁，對比github的pages服務，使用碼云的訪問速度肯定會更快。