Vue项目从无到有的部署上Github page

知乎

我的博客

Github

准备工做

• Nodejs安装

Node官网下载

建议安装在非系统盘的英文目录下

Node环境配置

新建文件夹 --- node_cache 和 node_global(npm install -g package-name)

建立完文件后，须要更改 npmrc 中的 perfix 和 cache

npm config set prefix "E:\Program Files (x86)\Nodejs\node_global"
npm config set cache "E:\Program Files (x86)\Nodejs\node_cache"
复制代码

你须要替换你的安装目录

• Vue-cli安装

npm run -g vue
vue -V
复制代码

1. 建立Vue项目

vue init webpack project-name
复制代码

2. 修改 Vue项目配置

config/index.js --> build --> assetsPublicPath --> / --> ./

build/webpack.prod.conf.js --> new HtmlWebpackPlugin --> removeAttributeQuotes --> true --> false .gitignore --> 注释/dist/

3. 项目打包

npm run build 
复制代码

4. 项目测试

在使用http-server前，须要安装 npm i -g http-server
http-server ./dist
复制代码

5. 建立 Github项目

6. 本地 Vue项目 Push到 Github官网

git init
   
git add .
   
git commit -m 'init vue project'
   
git remote add origin git@github.com:Rain120/demo.git 
   
git pull origin master --allow-unrelated-histories
   
git push -u origin master
复制代码

7. Github Setting -- 配置 Github page

Settings

Github Pages

Save Setting

最后能够在 https://rain120.github.io/demo/dist/，能够看到部署上线的效果（这个仓库我会在演示完后删掉，请自行测试）