vue項目 構建 打包 發佈 三部曲

1、vue項目的建立

一、首先第一確定是要有Node.js及npm這個很少說了
二、安裝腳手架

 

• 此時能夠直接瀏覽-可是如今確定有不少小白想將他發佈到gitHub上並能夠瀏覽，使用vue全家桶製做本身的博客。
• 如今就有我來講說如何講vue項目發佈到github上
• 以前寫過vue環境搭建 能夠參考： vue環境搭建 

2、vue項目的打包

一、你們都知道使用npm run build進行打包，這個時候你直接打開dist/下的index.html,會發現文件能夠打開，可是全部的js，css，img等路徑有問題是指向根目錄的，

　  此時須要修改config/index.js裏的assetsPublicPath的字段，初始項目是/他是指向項目根目錄的也是爲何會出現錯誤，這時改成./

 

• ./ 當前目錄
• ../ 父級目錄

• / 根目錄

• 根目錄：在計算機的文件系統中，根目錄指邏輯驅動器的最上一級目錄，它是相對子目錄來講的；
  　　　　它如同一棵大樹的「根」通常，全部的樹杈以它爲起點，故被命名爲根目錄。以微軟公司開發的Windows操做系統爲例：
  　　　　打開個人計算機（計算機），雙擊C盤就進入C盤的根目錄。雙擊D盤就進入D盤的根目錄

 build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

• 在從dist根目錄打開index文件就能夠訪問了。

3、github pages

一、首頁建立一個倉庫，此處直接忽略

 

二、在這裏選擇master或者/doc 上傳代碼到master 

三、上面有一行域名就是你本身的頁面能夠看到本身發佈的項目

4、自定義域名

一、這個時候就能夠瀏覽本身的項目了，可是

username.github.io/xxx/dist
這樣的地址着實不是很美觀，你們能夠去阿里雲上，本身買個域名，解析一下，網上都有，能夠進行自定義的域名，
來製做的本身的博客，代碼部署到github上。這篇文章這裏就先不作講解了，有想使用自定義域名，也能夠私信我。

 

總結

---

• 這裏發佈頁面，其實最主要的時候坑是路徑問題，須要修改配置文件，你們沒事能夠多多瀏覽文檔瞭解vue的總體架構邏輯，後續再給你們帶來框架從入門到放棄。