vue-spa項目在github實現配置展現

前言

也許你確定熟悉github-page ,並知道github支持自定義域名，前提是你新建了這樣的一個同名git項目，名稱是你的git用戶名 ，格式是這樣的name.github.io,而後能夠經過name.github.io/proname訪問到其餘的項目。

也許你也很熟悉vue能夠實現單頁應用，那麼是否能夠這樣，我把vue單頁應用打包後的資源直接丟到項目上，這樣地址就變成了我單頁應用展現的地址。答案是確定的。

建議閱讀對象：對github pages不熟悉，以及前端比較小白的童鞋。 建議閱讀時間: 10-15min

操做步驟

更改項目爲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單頁應用支持更好的展現而不用買服務器，提供給小白少走彎路。