## 前言 也許你肯定熟悉github-page ,并知道github支持自定義域名，前提是你新建了這樣的一個同名git項目，名稱是你的git用戶名 ，格式是這樣的name.github.io,然后可以通過name.github.io/proname訪問到其他的項目。 也許你也很熟悉vue可以實現單頁應用，那么是否可以這樣，我把vue單頁應用打包后的資源直接丟到項目上，這樣地址就變成了我單頁應用展示的地址。答案是肯定的。 ## 操作步驟 ### 更改項目為github pages 找到項目設置tab項里對應github pages部分改為下圖所示。需要做的有：設置展示的分支，主題可以不選，然后如果你有域名可以直接這里寫你綁定的自己的域名，相當于在項目根目錄下添加了一個CNAME ,內容就是你的域名，不帶協議的。  ### 用vue-cli腳手架初始化你的項目 利用vue-cli腳手架，把你的項目進行初始化，初始化之后你的項目就可以通過localhost:8080訪問：具體過程不再贅述。 備注：如果你遇到了啟動失敗，是關于localhost的，那么你需要設置本機的host解析： 127.0.0.1 localhost. ### 更改項目里的設置 我們知道這個腳手架默認是把打包后的資源丟到dist文件夾的，而dist文件夾是在.gitignore中忽略的，所以我們需要做以下的操作： - dist資源需要上傳，方便demo的展示 找到根目錄.gitignore部分，吧忽略的dist目錄刪除，這樣打包的dist文件就可以被推送了。 - 模板的index頁面移動到src中 直接復制過去就好了，同時我們需要修改以下的幾個位置，因為目前我們就簡單考慮dev和prod環境，所以只更改這兩個部分的配置。 在build/webpack.dev.conf.js中，找到 HtmlWebpackPlugin的插件配置，其原來template模板本部分配置的是index.html，我們現在需要改為src/index.html ~~~ new HtmlWebpackPlugin({ filename: 'index.html', template: 'src/index.html', inject: true }), ~~~ 同理，在build/webpack.prod.conf.js中，找到 HtmlWebpackPlugin的插件配置，其原來template模板本部分配置的是index.html，我們現在需要改為src/index.html，與以上相同，這個是改的打包時候的配置。 - 然后還需要糾正打包之后index.html文件的存放位置以及對應資源的加載路徑，這部分在config/index.js中build對象的配置下。 打包后的index.html放到根目錄，資源部分還在dist中，對應的字段為index，對照原來的，我們需要把打包后的文件放到../index.html文件中，也就是根目錄，不是原來的../dist/index.html,并且資源assetsPublicPath字段還要統一加前綴，/dist/，原來是/，因為index.html與資源的相對關系發生改變了。 ~~~ // Template for index.html index: path.resolve(__dirname, '../index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/dist/', ~~~ ### 代碼推送 將你本地的代碼推送到github，然后通過name.github.io/proname 就可以看到你的單頁應用了。 ## 總結 本文非常水，只是教大家進行一些配置以及讓你的vue單頁應用支持更好的展示而不用買服務器，提供給小白少走彎路。