本篇为Vue CLI
最後一篇,专案已经建立好,环境也有概略的说明,接下来当然是上传到Gihub Pages
,未来如果有自己作品集,就有网址可以提供。
开启终端机,执行指令:
npm run build
编译完成会产生一个dist
的资料夹,点开dist
资料夹之後直接开启index.html
,会发现里面路径是以根目录
的形式引入,例如/js
、/css
:
开启的index.html
档案画面会变成一片空白,正确方式应该把dist
资料夹放到vscode
以Live Server
的方式启动,因为index.html
是在dist
里面,以上会跟我们等等更改路径有相关。
首现要建立vue.config.js
档案,这边我们使用Vue UI
来建立,开启终端机执行指令:
vue ui
执行完成会自动开启Vue UI
介面视窗:
公开路径调整为/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
:
.gitignore
档案里的/dist
删除,否则推送Git会自动忽略。Gihub Pages
首先到GitHub
网站执行下列步骤:
创建一个新的远端数据库:
Repository name
输入完名称後。
点击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!
,来到这个画面:
点击None
切换成main
之後储存,会看到一个绿色框框,里面有一个网址点击进去,再把步骤2'/远端数据库名称/dist/'
贴到网址後面就可以正常显示:
提醒:当你要下载别人专案或是自己的专案时,记得执行npm i
,这样才能正常运行,因为下载的时候不会包含node_modules
资料夹,而指令npm i
就是把package.json
里面有安装的套件或是预设全部下载回来,产生
node_modules
资料夹。
<<: Day 28 : 案例分享(8.2) 讯息、邮件与线上会议 - 线上会议 odoo15 新功能
今天要来说明 ROS 怎麽安装,今天会分成 Ubuntu18.04 跟 Windwos 两个版本来讲...
今年的疫情蛮严重的,希望大家都过得安好,希望疫情快点过去,能回到一些线下技术聚会的时光~ 今天目标:...
记录完後我们就要开始查询了以下是蛮简单的查询方式。 import psycopg2 import o...
Cloud ?? 今天来跟各位介绍一下到底什麽是云端。 4ㄉ,所谓的云端就是先教会电脑怎麽飞行,而通...
Hi 大家,我的技术分享已经告一个段落了,会以一天一个案例跟大家分享,不过相对外面企业应该是小巫见大...