Vue.js 从零开始:Vue CLI / Gihub Pages

本篇为Vue CLI最後一篇,专案已经建立好,环境也有概略的说明,接下来当然是上传到Gihub Pages,未来如果有自己作品集,就有网址可以提供。


1.编译你的专案

开启终端机,执行指令:

npm run build

编译完成会产生一个dist的资料夹,点开dist资料夹之後直接开启index.html,会发现里面路径是以根目录的形式引入,例如/js/css
https://ithelp.ithome.com.tw/upload/images/20211008/20118347mrQjPHUjzy.png
开启的index.html档案画面会变成一片空白,正确方式应该把dist资料夹放到vscodeLive Server的方式启动,因为index.html是在dist里面,以上会跟我们等等更改路径有相关。

2.调整编译後资料夹的路径

首现要建立vue.config.js档案,这边我们使用Vue UI来建立,开启终端机执行指令:

vue ui

执行完成会自动开启Vue UI介面视窗:

https://ithelp.ithome.com.tw/upload/images/20211008/201183471Gx0pYZ8x3.png

公开路径调整为/github储存库名称/dist/并保存修改,Vue的专案就会多出一个vue.config.js档案,里面的内容就是透过Vue UI保存的设定:

module.exports = {
  publicPath: '/github储存库名称/dist/'
}

回到终端机关闭Vue UI,并且重新执行npm run build再编译一次,dist资料夹才会更新,这时我们再打开dist里面的index.html,路径已变成/side-project/dist
https://ithelp.ithome.com.tw/upload/images/20211008/20118347AeQRoJTDli.png

以上完成後,将.gitignore档案里的/dist删除,否则推送Git会自动忽略。


3.推送至 Gihub Pages

首先到GitHub网站执行下列步骤:

  1. 创建一个新的远端数据库:
    https://ithelp.ithome.com.tw/upload/images/20211008/20118347YCwutRI3Aj.png

  2. Repository name输入完名称後。

  3. 点击Create Repository

回到我们vscode终端机执行以下指令:


git add .
git commit -m "版本资讯"
git remote add origin [email protected]:远端数据库名称.git
git branch -M main
git push -u origin main

不需要git init是因为Vue CLI已经帮我们建立好了,上传完毕之後再回到GitHub,就会看到刚刚上传的档案,之後点选Settings滑到最下面点击Check it out here!,来到这个画面:
https://ithelp.ithome.com.tw/upload/images/20211008/20118347LXBprjloRw.png

点击None切换成main之後储存,会看到一个绿色框框,里面有一个网址点击进去,再把步骤2'/远端数据库名称/dist/'贴到网址後面就可以正常显示:
https://ithelp.ithome.com.tw/upload/images/20211008/20118347BLR7SGxlQ3.png

提醒:当你要下载别人专案或是自己的专案时,记得执行npm i,这样才能正常运行,因为下载的时候不会包含node_modules资料夹,而指令npm i就是把package.json里面有安装的套件或是预设全部下载回来,产生
node_modules资料夹。

/images/emoticon/emoticon28.gif


参考资料

Github Pages - 免费网页空间随你开


<<:  Day 28 : 案例分享(8.2) 讯息、邮件与线上会议 - 线上会议 odoo15 新功能

>>:  Azure MLS-Notebooks中开发

Day 3 ROS 安装

今天要来说明 ROS 怎麽安装,今天会分成 Ubuntu18.04 跟 Windwos 两个版本来讲...

Day 25 Compose UI Theme

今年的疫情蛮严重的,希望大家都过得安好,希望疫情快点过去,能回到一些线下技术聚会的时光~ 今天目标:...

[DAY29]Line查询Postegre

记录完後我们就要开始查询了以下是蛮简单的查询方式。 import psycopg2 import o...

[Day2] What is Cloud

Cloud ?? 今天来跟各位介绍一下到底什麽是云端。 4ㄉ,所谓的云端就是先教会电脑怎麽飞行,而通...

Day 25. Zabbix 实际报警案例分享 - 帐号资料被异动

Hi 大家,我的技术分享已经告一个段落了,会以一天一个案例跟大家分享,不过相对外面企业应该是小巫见大...