Vue-将vue项目部署到码云pages服务上

有时候我们在学习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服务，使用码云的访问速度肯定会更快。