作为前端的我,喜欢用所学的技术去实现平时脑海里迸发的有趣灵感,但是每次都只是自娱自乐(项目只能在本地运行),那种双击就能预览的普通网页项目还好说,直接放到服务器上就能跑了,而Vue.js项目打包生成的dist文件是不能按此方法运行的,需要配置Nginx反向代理,这一点我一直没有尝试,所以至今依然不懂。今天在食堂排队的时候和同事闲聊:“我这个项目现在已经做出来了,你说怎么才能分享出去让别人访问啊?”,同事的回答点醒了我,这也是今天要分享的东西——码云Pages

码云 Pages 是一个免费的静态网页托管服务,您可以使用 码云 Pages 托管博客、项目官网等静态网页。如果您使用过 Github Pages 那么您会很快上手使用码云的 Pages服务。目前码云 Pages 支持 Jekyll、Hugo、Hexo编译静态资源。

码云官网

得知这一点,着实兴奋,开干!

先睹为快

1. 在码云上创建一个项目,比如test

2. 在该项目中新建一个index.html文件,写上最基本的html测试代码就好了,然后提交至仓库。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title</title>
  </head>
  <body>
    Hello Gitee Pages
  </body>
</html>

3. 接下来,点击服务,选择Gitee Pages,选择需要部署的分支,由于我们现在就只有master分支,所以就选它了,然后启动服务。

4. 点击生成的地址,于是,你拥有了第一个可供大家访问的网页!

进入正题

前提:你的vue项目已托管在码云上了,否则,需先在码云上创建项目,然后克隆至本地,修改代码,提交至码云。

将已经开发完成的vue项目打包(执行npm run build),生成dist文件夹。

假设该项目是在master分支上开发的,执行如下命令可基于master分支创建product(生产)分支,该分支用于部署至Gitee Pages。

> xxx (master)
$ git checkout -b product

dist以及未被git管理的文件(如node_modules.git.gitignore.idea.browserslistrc)以外,其他的都删除。然后将dist文件夹内的所有文件(cssfavicon.icofontsindex.htmljs)拷贝至上一层(即与dist同级),删除空的dist文件夹。此时,正确的文件结构应如下:

现在将这些改动提交到码云上

> xxx (product)
$ git add .
$ git commit -m '项目打包,部署码云Pages'
$ git push origin product

此时,码云上有了我们刚刚提交的新代码,下一步就是开启Gitee Pages服务了。进入你的vue项目主页,根据先睹为快第3步图示,选择Gitee Pages。如果一切正常,启动服务后,点击生成的网址链接就能运行项目了。

但这一步一般都没那么顺利,你很可能会遇到css、js等静态文件路径出错的问题。以vue@cli 4.x为例(vue@cli 3.x修改baseUrlvue-cli 2.x修改assetsPublicPath,值都为'./'),在项目根部目录(即与src同级)新建文件:vue.config.js

module.exports = {
  publicPath: './'
}

另外,还需要修改路由模式为hash

const router = new VueRouter({
  mode: 'hash', // 关键在这一行,其他的按照自己的项目来,可以忽略
  base: process.env.BASE_URL,
  routes
})

再重新打包、切换product分支,更新dist文件、提交product、重启Gitee Pages服务:

> xxx (master)
$ npm run build
# 将打包生成的dist暂拷贝至桌面备用
$ git add .
$ git commit -m '修改静态文件路径、修改路由模式'
$ git push origin master
$ git checkout product

> xxx (product)
# 将桌面的dist文件夹内的文件替换product分支内的旧文件
$ git add .
$ git commit -m '修改配置后的提交'
$ git push origin product
# 打开码云,去vue项目首页,选择Gitee Pages,部署分支一栏选择“product”,点击启动

2020年6月4日补充:

项目放在码云上可以访问,那么放在我的博客里呢?

经过一番尝试之后,果然没让我失望,哈哈哈哈!

vue项目打包生成的文件夹默认是dist,通过配置vue.config.js文件中的outputDir,可以修改打包后的文件夹名称,因为项目根目录变了,所以还要修改publicPath字段的值:

module.exports = {
  publicPath: '/test/',
  outputDir: 'test' // 将默认的dist修改为test
}

执行npm run build后就能拿到test文件夹了,将其压缩,然后登录阿里云(万网)服务器后台,将test压缩包上传至服务器htdocs目录内,解压缩,输入域名+test就能访问啦!

0
分类: gitvue
浏览:2,639

0 条评论

发表评论

电子邮件地址不会被公开。

你必须允许浏览器启用JavaScript才能看到验证码

Scroll Up