關於vue專案的構建，打包和發布過程的介紹

這篇文章主要介紹了關於vue專案的構建，打包和發布過程的介紹，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

很多朋友對於VUE專案的一系列流程不熟悉，小編根據網友提出的問題，整理了關於vue專案的建置打包發布全過程，希望對你有用。

一、vue專案的創建

1、首先第一個肯定是要有Node.js及npm這個不多說了

2、安裝腳手架

此時可以直接瀏覽-但是現在肯定有很多小白想將他發佈到gitHub上並可以瀏覽​​，使用vue全家桶製作自己的部落格。現在就有我來說說如何講vue專案發佈到github上之前寫過vue環境建置可以參考： vue環境建置

二、vue專案的包裝

1、大家都知道使用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檔就可以存取了。

三、github pages

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

2、在這裡選擇master或/doc 上傳程式碼到master

3、上​​面有一行網域就是你自己的頁面可以看到自己發佈的項目

四、自訂網域

#1、這個時候就可以瀏覽自己的專案了，但是

#username.github.io/xxx/dist

這樣的地址著實不太美觀，大家可以去阿里雲上，自己買個域名，解析一下，網上都有，可以進行自定義的域名，來製作的自己的博客，代碼部署到github上。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

vue在腳手架中設定Sass的方法

vue-cli專案中怎麼使用mock資料

以上是關於vue專案的構建，打包和發布過程的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！