這篇文章主要介紹了關於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專案的構建，打包和發布過程的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
