将vue项目打包后部署到github pages

我用的新版本的（@vue/cli）Vue CLI 3 。首先前往 github 官网, 点击 New repository 创建新项目. 填入项目基本信息, 点击 Create Repository 确认.然后clone到本地，使用如下命令创建项目 

vue create hello-world

创建好新项目之后，在跟目录新建 vue.config.js ，并添加以下内容（这是重点）

 

module.exports = {
  publicPath: './',
  outputDir: 'docs'
}

注：publicPath 加点是修改路径，预防js，css等加载不到的问题，outputDir 修改是为了能在github pages展示同时不影响vue cli创建的项目目录结构。

然后运行打包命令

npm run build

 将项目push到github。

为项目（ repository）开启 github page 选项，在要展示的项目首页（路径：username/repositoryName）点击  Setting   ，向下滚动找到GitHub Pages 选项, 将 Source 改为master branch /docs folder , 最后点击 Save 按钮。（选择master branch /docs folder契合了前面的outputDir 打包配置）

最后得到一个链接，类似这样： https://username.github.io/repositoryName 。

来源：oschina

链接：https://my.oschina.net/u/4075942/blog/3131769